在前端开发中，CSS 是非常重要的一部分。然而，如果在大型的 React 项目中仅仅使用全局样式，将会带来一系列的问题，例如样式污染、命名冲突等。这时候，CSS Modules 就是一个很好的解决方案。CSS Modules 是一种解决 CSS 命名冲突问题的技术方案，它将样式作用域限制在组件内部，避免了全局样式的污染，同时还提供了一些便利的特性。
本文将讲解如何在 React 项目中使用 CSS Modules。
安装和配置 CSS Modules
首先，需要通过 npm 安装 CSS Modules：
npm install --save-dev css-loader style-loader
安装完成后，在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
-------- -----------------
---- -
- ------- -------------- --
- ------- ------------- -------- - -------- ---- - --
--
--
--
-其中，options: { modules: true } 是开启 CSS Modules 的关键。
在组件中使用 CSS Modules
在组件中使用 CSS Modules 的方式非常简单，只需要在 import 样式时添加 *（星号）即可：
-- -------------------- ---- -------
------ ------ ---- --------------
---
------ -
---- -----------------------------
-- ------------------------------ ----------
------
-这样，就可以在组件内部使用 styles.container、styles.text 等类名，而不用担心和全局样式混淆。
使用伪类和全局样式
有些情况下，可能需要在 CSS Modules 中使用伪类（如 :hover）或全局样式，这时候可以使用 :global() 来解决。例如：
-- -------------------- ---- -------
---------- -
-- ---- --
--------------- -
------ ----
-
-- ------ --
--------------------- -
---------- -----
-
-在组件中，可以这样使用：
-- -------------------- ---- -------
------ ------ ---- --------------
---
------ -
---- -----------------------------
-- -------------------------- -------------- ----------
-- ------------------------------ ----- ----------
------
-总结
CSS Modules 提供了一种非常好的解决方案，可以避免组件之间的样式混淆和命名冲突。在这篇文章中，我们讲解了如何在 React 项目中使用 CSS Modules。
首先，需要安装和配置 css-loader 和 style-loader。其次，在组件中使用 CSS Modules 时，需要在 import 样式时添加 *，然后就可以在组件中使用 styles.xxx 的方式使用样式了。最后，我们介绍了如何使用伪类和全局样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e51e8df6b2d6eab3094bbb