介绍
在前端开发中，样式表一直是我们不可或缺的重要组成部分。然而，CSS 的全局污染问题让我们对样式表的维护变得非常困难。为了解决这个问题，出现了一种叫做 CSS modules 的解决方案，它将样式文件分离成一个个独立的模块，避免了全局污染的问题，并大大简化了样式表的维护。
而 react-css-modules-modify 是一个基于 CSS modules 的 React 组件库，可以帮助我们更方便地管理和修改样式表。本文将介绍如何在 React 项目中使用 react-css-modules-modify，并且从中深入学习如何使用 CSS modules。
安装和配置
首先，我们需要在项目中引入 react-css-modules-modify。可以使用 npm 或 yarn 安装：
npm install react-css-modules-modify # 或 yarn add react-css-modules-modify
引入后，我们需要在配置文件中添加对 CSS modules 的支持。这里以 webpack 为例，在 webpack 配置文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------------
---- -
---------------
-
------- -------------
-------- -
-------- -
--------------- -----------------------------------
--
-------------- --
---------- ------
--
--
-
------- --------------
-------- -
---------- ------
--
--
--
--
--
--
-- ---
-这段代码告诉 webpack 针对 CSS 和 SCSS 文件，先使用 css-loader 处理，启用 CSS modules 支持，并且可以指定 localIdentName，这个选项是控制生成的类名的格式。接着使用 style-loader 和 sass-loader 处理样式。
使用 react-css-modules-modify
有了基本的配置后，我们就可以在 React 项目中使用 react-css-modules-modify 了。
首先，我们需要在组件中引入样式文件：
-- -------------------- ---- -------
------ ------ ---- ----------------------------
-------- ------------- -
------ -
---- -----------------------------
--- ------------------------------ ----------
-- ------------------------------------ ----- ----- --- ---------
------
-
-
------ ------- -----------这里的 styles 就是 CSS modules 自动生成的样式对象，通过样式对象上的属性名来控制类名。
接着，我们可以通过添加 className 属性向样式对象传入参数，实现样式的修改：
-- -------------------- ---- -------
-------- ------------- -
------ -
---- -----------------------------
--- ------------------------------ ----------
-- ------------------------------------ ----- ----- --- ---------
------- ---------------------------- --------------------- -----------
------
-
-这里将多个类名拼接成一个字符串，然后通过 className 属性传入 button 元素，实现了样式的修改。
高级操作
在 react-css-modules-modify 中，还有很多高级操作可以让我们更方便地处理样式。比如，使用 interpolateName 函数定制样式对象中的类名格式：
-- -------------------- ---- -------
----- ------------------------ - -------- ----- -------- -- -
----- --------- - ------------------ - ---- - --------------------- - ------------
-- ------------------- -
------ --------------------
-
------ ---------
-
----- ------------- - -
--------------- -----------------------------------------
---------------- -------------------------
-
----- ------ - --------------- --------------这里使用 interpolateName 函数，定制了 localIdentName，使其包含文件路径和文件名，从而更好地组织样式表。
还有一个非常有用的功能是作用域的继承。当需要在一个子组件中继承某个父组件的样式时，只需要使用 composes 关键字即可：
-- -------------------- ---- ------- -- ----------------------- -- ---------- - -- --- - ------ - -- --- - ------------ - -- --- - ------- - -- --- - ---- - ------ ---- - -- ---------------------------- -- ------- ---------------------------- ----------------- - --------- ------- ---- ---------- ----- -
这里，MyChildComponent 组件中使用 @import 指令，将 MyComponent 的样式文件引入后，使用 composes 关键字，继承了 button 和 red 两个类名，并在该元素中添加了一个新的类名 secondary-button。
总结
通过 react-css-modules-modify，我们可以更好地管理和修改样式表，实现模块化的 CSS 开发。在本文中，我们从基本的安装和配置开始，逐步了解了 react-css-modules-modify 的使用方法，并且介绍了一些高级操作。希望这篇文章对你有所帮助，也希望你能在项目中成功地应用这些技术！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adf81e8991b448d8863