学习记录——react的css模块化

css模块化

css模块化，意味着每一个组件里面的样式都是独立的，互相不会影响的。

比如在index里设置一个样式，在son再设置一个样式，它们的class类名都是一样的，那么直接写肯定是会相互影响的，就需要css模块化。

然后到index.js里：随便给哪个元素加个className

到index.css里随便写个样式：

.active{
    background-color: skyblue;
 }

然后到Son.css里：写一个一样类名的样式

.active{
    background-color: pink;
 }

然后打开页面会发现，页面显示的是index.css里设置的蓝色样式

所以，为了避免多个组件之间的样式会互相干扰的问题，就有了css模块化的概念
首先，我们要将所有的css文件后缀改为xxx.module.css

引入的语法：import style from ‘xxx.module.css’

然后就是写className的时候，之前的写法是className=“类名”
要改成className={style.active} 同理id写法也是一样的，id={style.parent}