在前端开发中，样式管理一直是一个需要解决的问题。为组件编写样式时，需要考虑样式的复用性、命名空间的管理、样式之间的依赖关系等等。而在 React 中，CSS Modules 提供了一种较好的样式管理方案。本文将介绍如何在 React 中使用 CSS Modules 进行样式管理。
什么是 CSS Modules
CSS Modules 是一种将 CSS 样式文件的类名作用域限制到当前模块的方案。这样做可以防止全局污染，且提供更好的命名空间管理。
使用 CSS Modules 后，在组件内使用样式时，可以直接引入样式文件，并通过样式文件导出的类名进行样式设置，如下所示：
-- ----------------- -- ------- - ----------------- ----- ------ ----- -
-- ---------- ------ ------ ---- ---------------------- -------- -------- - ------ ------- ------------------------------- ------------ -
代码中的 styles.button 等价于 styles["button"]，表示使用了 styles.module.css 文件中导出的 button 类名，从而将样式应用到当前按钮组件。
在 React 中使用 CSS Modules
在 React 中，使用 CSS Modules 只需要在样式文件名后添加 .module. 的后缀即可。例如，styles.css 可以写成 styles.module.css，以实现 CSS Modules 特性。
安装支持
要在 React 中使用 CSS Modules，需要确保你的项目支持解析 CSS Modules。通常，可以通过使用 css-loader 和 style-loader 对 CSS 模块进行加载并生成类名映射。例如，Webpack 配置可以像下面这样：
-- -----------------
-------------- - -
------- -
------ -
-
----- -----------------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--------------- -----------------------------------------
--
--
--
--
--
--
--配置中的 modules 选项指示 CSS Loader 应启用 CSS Modules，而 localIdentName 则为类名设置统一生成规则，以避免命名冲突。
使用样式
在配置好支持后，我们可以开始使用 CSS Modules。在组件中，通过 import 语句来引入样式文件，并通过导出的类名来应用样式。
------ ----- ---- -------- ------ ------ ---- ---------------------- -------- -------- - ------ ------- ------------------------------- ------------ -
代码中的 styles.button 即为样式文件中导出的 button 类名，该类名仅在当前组件作用域中有效。
定义组合样式
有时候，我们需要在多个类名上组合使用样式，例如：
-- ----------------- -- ---------- - ----------------- ------- - ------- - ------- --- ----- ----- ------ ----- -
在 Button 组件中，需要同时应用这两种样式。此时，我们可以在组件中定义一个新的类名，用于组合这两种样式：
------ ----- ---- --------
------ ------ ---- ----------------------
-------- -------- -
------ -
------- ---------------------------- --------------------------- -----------
--
-代码中的 ${styles.button} ${styles.highlight} 表示同时应用 button 和 highlight 类名的样式。
定义条件样式
有时候，我们需要根据状态来设置组件的样式。此时，我们可以通过定义多个样式类名，然后根据组件属性来动态选择应用的样式。
例如，在下面的 Button 组件中，根据 disabled 属性确定是否应用 disabled 样式：
------ ----- ---- --------
------ ------ ---- ----------------------
-------- ------------- -
----- - -------- - - ------
------ -
-------
---------------------------- ---------- - --------------- - -----
-------------------
-
----- --
---------
--
-组件中根据 disabled 属性确定是否应用了 disabled 样式类名。
使用类名映射
在有些时候，可以使用 JavaScript 对象来枚举样式名和类名之间的映射，在组件中使用该对象直接应用样式，如下所示：
-- ---------
------ ----- ------ - ---------
------ ----- --------- - ------------
-- ----------
------ ----- ---- --------
------ - -- ------ ---- -----------
-------- -------- -
------ -
------- ----------------------------- ---------------------------- -----------
--
-代码中，styles.js 中导出的 button 和 highlight 可以直接作为样式类名使用。
总结
CSS Modules 是一种将 CSS 样式文件的类名作用域限制到当前模块的方案，适用于 React 等模块化开发中的样式管理。在 React 中使用 CSS Modules，需要通过对 css-loader 和 style-loader 进行
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6502f60695b1f8cacd01e346