我们知道,在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结尾,启用模块化

技术
©2019-2020 Toolsou All rights reserved,
TypeScript:函数类型接口8道大厂指针笔试题让你秒杀指针!!!MySQL 日期时间加减mysql 查询条件之外的数据_mysql 查询符合条件的数据查linux的操作系统版本,如何查看Linux操作系统版本?将String类型转换成Map数据类型使用uuid做MySQL主键,被老板,爆怼一顿C语言中的字符串函数和字符函数linux服务器中毒排查--基础篇C# ASCII码字符转换