CSS 没有加载反应，我对组件 css 文件之间的差异感到困惑，并将其添加到 app.css 中

Question

这是我的标题组件

import React from "react";

function Header() {

  return (

<div classname = "header">

    <nav classname = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">

        <div classname = "container">

            <button classname = "navbar-toggler" data-toggle="collapse" data-target = "#Navbar">

                <span classname = "navbar-toggler-icon"></span>

            </button>

            <a href = "/#" classname = "navbar-brand"><h3>Portfolio</h3></a>

<div classname="btn-group">

    <button type="button" classname="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      My networking

    </button>

    <div classname="dropdown-menu">

      <a classname="dropdown-item" href="https://docs.google.com/document/d/1iJ1v7HyfodCWvg5OSQIXbUATrBM9mPwdqeIzKuld1qs/edit">Resume</a>

      <a classname="dropdown-item" href="https://www.linkedin.com/in/tyler-goodman-39b289195/">LinkedIn</a>

      <a classname="dropdown-item" href="https://github.com/KawaiiSlave">Github</a>

    </div>

</div>

            <div classname = "collapse navbar-collapse" id = "Navbar">

                <ul classname = "navbar-nav ml-auto">

                    <li classname = "nav-item"><a href = "#About" classname = "nav-link">About Me</a></li>

                    <li classname = "nav-item"><a href = "#Skills" classname = "nav-link">Skills</a></li>

                    <li classname = "nav-item"><a href = "#Projects" classname = "nav-link">My Projects</a></li>

                    <li classname = "nav-item"><a href = "#Contact" classname = "nav-link">My Contact Info</a></li>

                </ul>

            </div>

        </div>

    </nav>

</div>

  );

}

export default Header; 

我已经有了要渲染的东西，但我对应该将 css 放在哪里感到困惑。它是否进入提供的 app.css 文件，或者最好放在活动组件中，因为该组件 css ？如果有人能用自己的 css 给出一个例子，那将会有很大帮助。我只是对反应开始有点不知所措。谢谢你！

Answer 1

如果您想为不同的组件创建特定的 CSS，您可以使用模块。当我创建经常使用的组件（例如卡片模块）时，我倾向于制作“CSS 模块”。例如，如果您有 Card.js 组件，您可以创建一个名为card.module.css.在 Card.js 的顶部，我将使用以下命令导入它import&nbsp;style&nbsp;from&nbsp;'./card.module.css';在 Card.js 中，您可以使用 JSX 表达式将 className 添加到元素，该表达式style可以像这样访问导入的内容<div&nbsp;className={style.header}>在card.module.css文件中，您可以为.header编写css.header&nbsp;{ &nbsp;&nbsp;//&nbsp;your&nbsp;CSS&nbsp;here &nbsp;&nbsp;}重申一下，您的 Card.js 文件将.header通过导入的'style'.&nbsp;如果您要在模块中添加更多 CSS，例如.wrapper&nbsp;{ &nbsp;&nbsp;//&nbsp;your&nbsp;CSS&nbsp;here &nbsp;&nbsp;}然后你也可以在 Card.js 中访问它className={style.wrapper}