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

Question

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

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

styles 没有在代码中的任何地方使用，所以我认为 WebPack 没有包含它。如果我对那个模块做了 anything，那么 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;
}

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

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

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

Answer 1

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

body {
    background-color: red;
}

CSS 模块，就像 CSS 文件一样，由Webpack 全局导入和应用。

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

你不需要对它做任何事情，只需像这样导入：

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