CSS 是网页开发中一个非常重要的部分，在 React 项目中也扮演着至关重要的角色。然而，随着项目规模的扩大，CSS 的管理成为了一个比较麻烦和棘手的问题，原生的 CSS 是在全局作用域下操作的，除非使用 BEM 或者命名空间的方式进行约束，但这种方式也难以维护；现在已经有一种能够有效解决这类问题的解决方案：CSS Modules。
什么是 CSS Modules？
CSS Modules 是一个基于 CSS 文件的一种技术方案，通过 webpack 对 CSS 进行头部声明的变量转换然后把 CSS 的类名等选择器生成一个 JS 的对象，从而实现 CSS 局部作用域。
使用 CSS Modules 可以轻松地达到下面的目标：
- 避免样式冲突
- 增加可维护性
- 更好的封装性
如何在 React 项目中使用 CSS Modules？
首先你需要将 CSS 文件重命名为
.module.css格式，以告知 webpack 加载 CSS Modules。在 React 组件内部，使用
import styles from './example.module.css'的方式导入 CSS 的样式，这样就可以使用样式对象中的类名属性，并在 JSX 标签中使用它们。-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ----------------------- ----- ------- - -- -- - ------ - ---- -------------------------------- --- ------------------------------ ---------- ------ -- -- ------ ------- --------
深入了解 CSS Modules
继承
CSS Modules 支持继承样式，通过 composes 关键字可以从其他样式中继承属性。例如：
-- -------------------- ---- ------- -- ----------------- -- ------- - -------- ----- -------------- ---- ------- --- ----- ------ - --------------- - --------- ------- ----------------- ----- -
selectedButton 样式会从 button 样式中继承 padding、border-radius、border 属性，并添加 background-color 属性。
使用变量
在项目中，有时需要在多个组件之间使用相同的样式属性，此时可以将其定义为变量。CSS Modules 支持 SASS 的变量。
-- -------------------- ---- ------- -- --------------------- -- -------------- ----- ---------------- ----- -- ------------------- -- ------- ------------------------ ------------- - ------ -------------- ----------------- ---------------- -
动态类名
CSS Modules 支持动态地生成类名，这样就可以实现更多的 CSS 上的变化。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- -----------------------
----- ------- - -- -- -
----- ---------- ------------ - ----------------
------ -
---- ---------------------------------- ---------- - --------------- - ------
--- ------------------------------ ----------
------
--
--
------ ------- --------结论
使用 CSS Modules 可以让我们在 React 项目中写更加优雅、方便、灵活的 CSS。大家可以根据自己的项目实际情况来使用，它可以极大地减少 CSS 的管理成本并增加项目的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753974c8bd460d3ada62d54