CSS module和React 中的应用

Posted 2023-03-26

参考技术A 由于CSS的规则是全局性的，添加任何一个样式，在全局都有效，优点是方便复用，缺点是会根据 权重的计算 造成样式冲突,非常难以管理。

有了钉子，自然就会有锤子。随着前端的发展出现了各种CSS模块解决方案，主要分两种：
一类是采用JS或者JSON 的方式写CSS，比如 jsxstyle , react-style ，虽然可以采用JS成熟方案来管理css, 但是它无法使用postcss ,sass等css预处理器，并且衍生了大批的api, 使用的代价较大。
另一类还是采用css 来写样式, 不过是通过工具生成CSS作用域的方式实现模块化，比如CSS module。常用的BEM命名技巧或者团队中约定的方案来实现命名空间从而实现模块化，不过约定总会出现问题，于是就出现了通过工具，比如webpack的css-loader根据算法，实现css 模块化。

webpack 内置的 css-loader 自带了CSS modoule, 配置如下:

create-react-app 2.0以上的版本中内置启动了CSS module, 如果需要特殊配置，则需要eject操作, 在webpack.config.js 中:

CSS module 默认采用局部样式，即给每个css 名添加上了“:local”, 对应的全局性的写法：

compose 组合样式：
对于样式复用，CSS module提供了唯一的方式 "compose":

多CSS class 的写法：

Sass 变量与JS共享

Css module 作者建议：
1.不使用选择器，只使用 class 名来定义样式
2.不层叠多个 class，只使用一个 class 把所有样式定义好
3.不嵌套
4.使用 composes 组合来实现复用

采用 classnames 来增强CSS module 在react 中的使用，类似Angular 中的样式指令：

参考链接： https://zhuanlan.zhihu.com/p/20495964

在 React 中使用 CSS Modules

参考技术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，一个是原始的类名）