学习笔记
分类： web前端
react中 使用css Modules ，解决组件间样式冲突的问题
文章作者：痴迷
在react脚手架中 已经支持了 css Modules 所以自己不用配置 生成的 类名是 以 文件名+类名+随机数......
生成的 类名是 以 文件名+类名+随机数
不推荐使用嵌套类名
如果别人写好的组件里面的类名 在前面加上 :global
:global(.am-navbar) {color:#333}
只在 类名nav里面生效
.nav :global(am-navbar) {color:#333}
1.创建名为 【name】.module.css 的样式文件 name随意名称
index.module.css
2.在组件中导入 样式文件
import styles from './index.module.css'
3.通过styles 对象访问对象中的 样式名 来做 设置样式
在页面中必须这样引入
<div className={styles.text}></div>
4.在 module .css 写 的css 样式
.text{
color:red
}
×
打赏作者
感谢您的支持，我们会一直保持!
请土豪扫码随意打赏
打开支付宝扫一扫，即可进行扫码打赏哦
分享从这里开始，精彩与您同在
版权所有，转载注意明处：前端笔记 » react中 使用css Modules ，解决组件间样式冲突的问题
发表评论