为什么CSS模块样式在我的元素RMWC上不起作用？

我是个新手，只是需要一些帮助来理解一些基本的事情。 我在下面的教程中介绍了web组件，并对此感到困惑 在样式和主题章节中

在本章中，作者试图解释使用标准CSS和CSS模块之间的区别，但我无法得到任何概念，这两者的区别是什么。为什么我们使用css模块，它与标准css有什么不同

我也在尝试使用css模块应用css，但是css并没有应用到元素上，我在这里做错了什么吗

我的代码（未应用样式）

index.js

import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'

import Button from '@material-ui/core/Button'

class App extends React.Component {
    render() {
        return (
            <div>
              <Button className={styles.button}>
                CSS Modules
              </Button>
            </div>
            )
    }
}

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

即使按照下面的方式做，它仍然工作得很好

import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'

import Button from '@material-ui/core/Button'

class App extends React.Component {
    render() {
        return (
            <div>
              <Button className="button">
                CSS Modules
              </Button>
            </div>
            )
    }
}

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

从“React”导入React
从“react dom”导入react dom
从“./index.css”导入样式
从“@material ui/core/Button”导入按钮
类应用程序扩展了React.Component{
render（）{
返回(
CSS模块
)
}
}
ReactDom.render（，document.getElementById（'root'））

如果您考虑编程最佳实践，那么使用全局变量是不好的

因为你们最终会遇到变量的冲突。在最坏的情况下，并没有任何警告，当变量的值发生变化时，您只会感到困惑

在css中，共享类或任何选择器可能会帮助您节省编写css的时间。但最终您会遇到一些问题（尤其是在中大型代码库中），发现元素是由无意中的类或选择器设置的样式，或者您想更改某个元素的样式，但它会影响您不想要的其他元素

我建议您阅读此链接以了解更多详细信息

对于您的情况，您需要设置babel插件以在react中使用css模块

---

如果你通过CreateReact应用程序创建项目，你应该看看@KenoClayton的答案，你的代码很好，除了一个你可能错过的小细节。使用

create-react-app

可以让您按照以下步骤使用css模块。您的文件名必须是

index.module.css

，才能作为css模块使用

参考：

此项目支持CSS模块以及使用[name].module.CSS文件命名约定的常规样式表

---

1.您可以通过快速的谷歌搜索找到标准CSS和CSS模块之间的详细差异，以及2。您需要向我们展示您的代码，以确定您的样式不起作用的原因。@kenoClayton我有一个更新的问题，您现在可以帮助吗？是的，现在正在查看您是否偶然使用了Create React应用程序？是的。我用的是create，谢谢。它就像一个符咒。但是我仍然无法通过使用简单的样式表和css模块来区分两者。@Sagar主要的区别在于，您可以用更编程的方式引用css模块。在同一个页面上，我链接它说

CSS模块可以让你在不同的文件中使用相同的CSS类名，而不必担心命名冲突。

但是在不同的样式表中使用相同的类名也可以so@Sagar不，具有该类的元素将获得不同样式表的样式。如果两个样式表中的属性相同，则元素将获得包含在中的样式表样式last@Sagar不完全是。例如，如果您想在应用程序中使用两个样式表，并且它们的名称存在冲突，那么最后一个要导入的样式表将覆盖第一个样式表。例如，

styles.css

和

styles2.css

都有一个名为

.button

的类。第二个将覆盖第一个

import React from 'react'
import ReactDom from 'react-dom'
import styles from './index.css'

import Button from '@material-ui/core/Button'

class App extends React.Component {
    render() {
        return (
            <div>
              <Button className="button">
                CSS Modules
              </Button>
            </div>
            )
    }
}

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