React解决样式污染问题

在vue文件中我们使用scoped来进行css模块化开发,使其样式互不受影响.

但是在react中没有scoped属性， 而react中我们发现css样式设置也存在互相影响的问题.(例如:改变全局样式,设置的样式不起效果,被其他地方的样式覆盖...)

但在react中可以利用module方法来解决：

（1）改样式文件名。从 xx.css -> xx.module.css （React脚手架中的约定，与普通 CSS 作区分）

（2）将写好的css样式引入到对应组件中。

import styles from "xxx.module.css";

 一般命名为styles

（3） 通过 styles 对象访问对象中的样式名来设置样式

注： 避免一个文件有相同的class名称，只生效一个（最后一个覆盖之前所有的）

解析完的类名是一个哈希串。

// css类名是index.module.scss中定义的类名
<div className={styles.css类名}></div>

（4）注意： css类名中如果有 '-' 则要改为styles[ css类名 ]。因为最终这个类名会生成为styles对象上的一个属性。一般推荐使用小驼峰命名法