当前位置: 首页 > article >正文

react中css样式隔离

 使用CSS Modules   css模块化
1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替  Home.css 
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入  代替  import './xxx.css'
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy}  其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式

方法一:

1,给对应的css文件,修改为module.css

2,引入样式的时候

方法二:

 根标签选择器限制
如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式


http://www.kler.cn/a/349489.html

相关文章:

  • 【Docker系列】Docker查看镜像架构
  • 基于JavaFX+Mysql实现(PC)足球联赛评分系统
  • C++ 右值引用深入理解:特性、优化与底层
  • Python数据容器——列表,元组
  • 如何指定this的值
  • Spring Boot在医疗行业B2B平台中的创新实践
  • Gravity CCT ALS Meter的色温与照度精度测试报告
  • IO编程--拷贝文件、文件总行数输出、时间打印
  • CentOS 7中将一个用户添加到 `sudoers` 文件,使其具备使用 `sudo` 命令的权限
  • 承兑汇票识别接口C#部署示例代码、银行承兑汇票api
  • HAProxy+Keepalived
  • docker login 命令登录harbor镜像仓库(含报错)
  • 03 视频编解码器
  • 闪电麦昆 语音控制齿轮行进轨迹,ESP32搭配语音控制板,串口通信,附视频演示地址
  • 决策树(1)
  • 从零开始学英语:三个月学习计划(每天30分钟到1小时)
  • 远峰科技申请内存空间分配专利,实现内存空间合理自动化分配
  • 爬虫实战总结
  • 【Vue】Vue扫盲(三)计算属性和监听器
  • Leetcode 划分字母区间