CSS模块在React 16.13.1中不起作用

Question

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

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

> @material-ui/[email protected]
> @material-ui/[email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]

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

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>
        );
    }
}

输出随Heading元素和Home，About按钮一起出现。但是没有CSS样式。

我该如何解决这个问题？

谢谢。

Answer 1

通常，如果自定义组件未传播到组件内部，则它不接受className属性。查看材料ui react组件Button文档，此组件不能具有className属性。https://material-ui.com/components/buttons/这意味着您不能使用它。要征服自己，请尝试使用常规的html，它会起作用，您会看到。