Question

我是新来的反应者，只需要一些帮助即可了解真正的基本知识。我在下面的教程中反应材料Web组件并感到困惑在样式和主题章节中。

https://jamesmfriedman.github.io/rmwc/styling-theming

在本章中，作者试图解释使用标准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'))

index.css

.button {
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border-radius: 3px;
  border: 0;
  color: white;
  height: 48px;
  padding: 0 30px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
}

即使通过以下方式进行操作，它也可以正常工作。

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'))

Answer 1

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

因为最终您将遇到变量冲突。在最坏的情况下，没有任何警告，并且变量值更改时您只会感到困惑。

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

我建议您阅读此链接以获取更多详细信息。

https://css-tricks.com/css-modules-part-1-need/

针对您的情况，您需要设置babel插件以在React中使用CSS模块

https://github.com/gajus/babel-plugin-react-css-modules

如果您通过create-react-app创建项目，则应查看@Keno Clayton的答案

Answer 2

您的代码很好，除了您可能错过的一个小细节。如果遵循their guidelines，则使用create-react-app可以使用CSS模块。您的文件名必须为index.module.css才能用作CSS模块。

参考：

该项目使用[name] .module.css文件命名约定，与常规样式表一起支持CSS模块。

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

2 个答案: