在 React 中使用 CSS Modules

Posted 2023-03-26

参考技术A

在 React 中，如果你直接在文件中引入 index.css，当父组件和子孙组件的 class 属性相同时，那么会发生 CSS 样式覆盖的问题。如果解决样式覆盖的问题呢？

手动维护 class 属性的唯一性太累了，所以使用 CSS Modules 是最方便的，CSS Modules 的出现，就是为了解决 CSS 在 React 中的样式冲突和覆盖等问题的。
CSS Modules 的功能很简单，就只是加入了局部作用域和模块依赖。

由于一般的脚手架都默认集成了 CSS Modules，比如 React 官方的脚手架：create-react-app，已经将 CSS Modules 集成进来了，我们可以直接使用。

1. 创建一个名为 index.module.css 的样式文件（CSS Modules 在 React 的用法，和普通 css 区分开）

2. 在 index.module.css 样式文件中编写 CSS 选择器和普通的 CSS 文件一样（CSS Modules 只是在编译的时候会自动转化为唯一的类名）

3. 在组件中导入样式文件

4. 通过 styles 对象访问对象中的样式名来设置样式

5. 如果想要改变全局样式，也就是使用原始的类名，则需要通过 :global() 来进行设置

6. 全局样式中，派生类选择器（父元素为 CSS Modules，而子元素为原始的类名）

7. 全局样式中，多类选择器（一个是 CSS Modules，一个是原始的类名）