【React笔记】react项目解决css相互影响，使用局部module.css

简介

在react组件中，不同组件的css文件有可能会相互冲突，这时候可以使用module.css，相当于给css添加了局部作用域和模块依赖，保证某个组件的样式，不会影响到其他组件。

1 如何使用

1. css文件改为使用style.module.css
   style.module.css文件中必须使用类选择器
   例如：

.item1 {
    width: 100px;
    background-color: pink;
}

2. 引入：import style from ‘./style.module.css’

import style from './Child.module.css'

3. 在组件中给标签添加css类名时要使用样式变量，即{style.item1}，例如：

<li className={style.item1}>111111</li>

2 禁用Hash

1. module.css通过给class添加一个hash值，保证class不会重名。如果在module.css中想要使用固定类名选择器而不使用hash，可以添加:global()，例如：

:global(.item2){
    color: blue;
}

3 样式继承

1. 如果需要继承某个样式，可以使用composes，例如以下例子为.item4 样式继承 .item3样式,使用 composes: item3;

.item3{
    color: blue;
}

.item4{
    composes: item3;
    font-weight: bold;
}

4 继承其他模块

1. 输入其他模块

.item5 {
  composes: className from './another.css';
  color: pink;
}

5 输入变量

1. CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。
   $ npm install --save postcss-loader postcss-modules-values
   参考阮一峰博客