CSS 模块在 React 16.13.1 中不工作

Question

我想在 React JS 中设置组件样式。我尝试了几种方法来做到这一点。当我尝试创建 CSS object 并将其应用于同一 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 样式。

我该如何解决这个问题？

谢谢。

Answer 1

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

Answer 2

首先：打开您的终端并运行 "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,
             },
           },
         ],
       },

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

Answer 3

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

CSS 模块在 React 16.13.1 中不工作

CSS module is not working in react 16.13.1

javascript

reactjs

material-ui

react-dom

react-css-modules