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";

CSS Modules vs. normal CSS to change background of page in React