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 style from './card.module.css';

在 Card.js 中，您可以使用 JSX 表达式将 className 添加到元素，该表达式style可以像这样访问导入的内容

<div className={style.header}>

在card.module.css文件中，您可以为.header编写css

.header {
  // your CSS here
  }

重申一下，您的 Card.js 文件将.header通过导入的'style'. 如果您要在模块中添加更多 CSS，例如

.wrapper {
  // your CSS here
  }

然后你也可以在 Card.js 中访问它

className={style.wrapper}