CSS 模块在 react 16.13.1 中不起作用答案

【问题标题】：CSS module is not working in react 16.13.1CSS 模块在 react 16.13.1 中不起作用
【发布时间】：2020-08-08 21:53:56
【问题描述】：

我想在 react JS 中设置组件的样式。我尝试了几种方法来做到这一点。当我尝试创建一个 CSS 对象并将其应用到同一个 JS 文件中的组件时，它就可以工作了。但是，当我尝试从外部 CSS 文件应用 CSS 并将其导入 JS 文件时，它就不起作用了。而且我还尝试将该文件保存为filename.module.css。但这对我没有帮助。

已安装的节点模块列表及其版本如下。

> @material-ui/core@4.9.11
> @material-ui/icons@4.9.1
> firebase@7.14.1
> react@16.13.1
> react-dom@16.13.1
> react-router-dom@5.1.2
> react-scripts@3.4.1

在react-script 模块的webpack.config.js 文件中，我找到了以下代码：

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

所以我猜我的 react 项目支持 CSS 文件以及 SCSS 和 SASS 文件。我理解对了吗？

header.module.css文件：

.heading {
    color: '#3592EF';
    font-weight: '600';
    letter-spacing: '2px';
}
.navButton {
    color: '#444';
    font-size: '16px';
    padding: '4px 8px';
    margin: 'auto';
    margin-right: '15px';
}

Header.js文件：

import React from 'react';
import { Button } from '@material-ui/core';
import styles from './header.module.css';

export default class Header extends React.Component {
    render() {
        return (
            <div>
                <span className={styles.headling}>Heading element</span>
                <Button className={styles.navButton}>Home</Button>
                <Button className={styles.navButton}>About</Button>
            </div>
        );
    }
}

输出带有标题元素和主页、关于按钮。但没有 CSS 样式。

我该如何解决这个问题？

谢谢。

【问题讨论】：

你试过import "./header.module.css"和<span className="headling">吗？
是的。我试过了。它没有用。

标签： javascript reactjs material-ui react-dom react-css-modules

【解决方案1】：

CSS 模块包含在 react 中您所要做的就是构建一个具有正确名称（例如“example.module.css”）的文件，如果它位于同一文件夹 `import tst from 'example.module.css' 或任何路径中，则使用正确的路径导入它在中，您可以将“tst”替换为您喜欢的任何名称。然后你可以在 className 中使用它，比如

<button className={tst.buttonPrimary}>Submit /button>

此视频可以为您提供更多帮助： https://www.youtube.com/watch?v=Udf951dyTdU

【讨论】：

【解决方案2】：

如果没有传播到组件的内部，通常自定义组件不接受 className 属性。查看材料 ui react components Button 文档，该组件不能具有 className 属性。 https://material-ui.com/components/buttons/ 这意味着，你不能使用它。要说服自己，请尝试使用通用 html <button>，它会起作用的，你看。编辑：语法

【讨论】：

已经在这里解决了：stackoverflow.com/questions/46040733/…
它不工作。正如我在Header.js 文件代码中给出的那样，有一个<span> 元素，我在其中定义了className 并尝试应用heading 样式。
可能拼错了？ headling --> heading?然后我建议简化导入：import './header.module.css'; 和 `Heading element` 然后检查你的 webpack 配置是否有：module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }]}
通过实验，我知道 CSS 只在App.css 文件中有效。但是，如果我在其他文件中添加 CSS，则它不起作用。有什么解决办法吗？
没有机会，如果您需要帮助，您将不得不分享您的完整代码。

【解决方案3】：

首先：打开终端并运行“npm install css-loader style-loader --save-dev” 这些加载器使 Webpack 能够捆绑 CSS 文件第二：在你的 webpack.config.js 文件中，添加新的加载器来解释 CSS 文件：

module.exports = {
  ...
  module: {
    rules: [
      ...
      *///

 {
         test: /\.css$/i,
         exclude: /node_modules/,
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
               modules: true,
             },
           },
         ],
       },

   *////
    ],
  },
  ...
};

【讨论】：