在 React 中，我们经常需要使用 CSS 来美化页面，但是在大型项目中，全局 CSS 可能会变得非常混乱和难以维护。为了解决这个问题，我们可以使用 CSS Modules 来管理 CSS。
CSS Modules 是一种将 CSS 模块化的方法，它可以将 CSS 样式表打包成独立的模块，并通过 JavaScript 引用。这样，每个模块都有自己的作用域，不会与其他模块的样式发生冲突。
安装和配置
首先，我们需要安装 css-loader 和 style-loader，它们是 Webpack 的两个 loader，用于加载和解析 CSS 文件。
--- ------- ---------- ---------- ------------
然后，我们需要在 Webpack 的配置文件中添加以下代码：
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- ----
-
-
-
-这个配置告诉 Webpack 在加载 CSS 文件时使用 style-loader 和 css-loader，并开启 CSS Modules。
在组件中使用
现在，我们可以在 React 组件中使用 CSS Modules 了。假设我们有一个 Button 组件，它的样式定义在 Button.module.css 文件中：
------- - ----------------- ----- ------ ------ -------- ----- ------- ----- -
我们可以在 Button.js 文件中通过 import 引入样式表：
------ ------ ---- ---------------------- -------- -------- - ------ ------- ------------------------------- ------------ -
这里，我们通过 import 引入了 Button.module.css 文件，并将其赋值给 styles 变量。然后，在组件中使用 styles.button 来引用样式。
注意，styles.button 不是一个字符串，而是一个对象。这个对象包含了样式表中定义的所有类名，并且每个类名都被映射成一个唯一的标识符。这样，我们可以避免类名冲突的问题。
高级用法
CSS Modules 还支持一些高级用法，例如：
全局样式
有时候，我们需要在全局范围内定义一些样式，例如重置默认样式或者定义网站的主题颜色。在 CSS Modules 中，我们可以使用 :global 关键字来定义全局样式。
------- -
---- -
----------------- --------
-
-
------- -
----------------- -----
------ ------
-------- -----
------- -----
-这里，我们使用 :global 关键字来定义了一个全局样式，它会应用到整个页面的 body 元素上。
继承样式
有时候，我们需要在一个样式类中继承另一个样式类的样式。在 CSS Modules 中，我们可以使用 composes 关键字来实现继承。
------- - --------- ---------- ---- -------------------------- ----------------- ----- ------ ------ -------- ----- ------- ----- - ----------- - ----------------- -------- ------ ------ -
这里，我们使用 composes 关键字来将 button 类继承了 baseButton 类的样式。
总结
CSS Modules 是一种将 CSS 模块化的方法，它可以将 CSS 样式表打包成独立的模块，并通过 JavaScript 引用。在 React 中使用 CSS Modules 可以避免全局 CSS 的混乱和冲突，提高代码的可维护性和可读性。
在使用 CSS Modules 时，我们需要安装和配置 css-loader 和 style-loader，并在组件中使用 import 引入样式表。此外，CSS Modules 还支持一些高级用法，例如全局样式和继承样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6581a93bd2f5e1655dce6225