CSS 模块与普通 CSS 在 React 中更改页面背景

Question

编辑：接受的答案帮助我解决了问题。这是正确的，所以我接受了。但我正在导入包含标签的模块body，但没有使用它。

import styles from "./App.module.css"; //Includes a body tag

styles代码中没有使用任何地方，所以我认为 WebPack 没有包含它。如果我对该模块做了任何事情，则包含 body 标签并且它可以工作。<div className={styles.anything}>允许body包含 CSS。

正如回答者在评论中所说，这可能是由于 Typescript 造成的。

---

我曾经create-react-app制作过一个应用程序。我在我的组件中使用 CSS 模块。我试图弄清楚如何使用 CSS 模块使页面的整体背景具有不同的颜色。

我想应用background-color: #121212;到整个背景。

我正在尝试找出如何应用该样式，现在看来需要将其应用于标签body。

应用于的任何样式App.tsx仅影响该组件占用的容器（背景仅在组件底部着色App，其下方为白色）

现在index.css包含

body {
  ...
  background-color: #121212;
}

这很好用。我想使用模块，但我不知道如何导入该样式来工作。

index.tsx我将在哪里导入使用 Webpack创建的文件的样式create-react-app。

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

打开您的.module.css文件之一，然后粘贴以下内容：

body {
    background-color: red;
}

CSS 模块与 CSS 文件一样，由Webpack.

.module.css例如，如果您想仅为该标签创建另一个body模块，则可以创建一个新模块，MyModule.module.css然后粘贴上面的代码。然后，将此新模块导入到您的文件之一tsx。

您不需要对其执行任何操作，只需像这样导入即可：

import myStyles from "./MyModule.module.css";