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

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

解决:

1、creat-react-app:解决css冲突问题：
2、npm run eject
3、打开配置文件webpack.config.js
4、找到css-loader配置（大概在112行左右）

//添加
{
  importLoaders:1,
  modules:true
}
//到css-loader中

内容如下：

5、npm start
6、创建css文件
7、在js组件内引用css文件import styles from '../css/style.css';
8、在标签中使用<div className = {styles.div}>看一看React导入和Componet导入</div>
9、即可为div标签生成哈希值的class值

/*模块化样式，类名或id名在DOM渲染时被重写为hash值，与local()包裹效果一致，均被模块化*/
 .look{
  color:blue;
}
/*全局定义，:global()包裹的类名或则id,类名或则id名不会变成hash值,可以全局引用 */
:global(.test) {
  font-style:italic;
  color:aqua;
}
:global(.active) {
    color: red;
    font-size: 30px;
}
/* 
1、全局样式+新增样式
className = {styles.p +' test'}  *注意：test前面有一个空格
2、
className = {[styles.p,'test'].join(' ')} */

 效果:

自我规定：
1、引入的第三方样式表，大多都是以.css结尾，不需要启用模块化
2、自己写的样式表，都要以.scss或.less结尾，启用模块化