React解决样式冲突问题的方法
React解决样式冲突问题的方法
前言:
1、React最终编译打包后都在一个html页面中,如果在两个组件中取一样类名分别引用在自身,那么后者会覆盖前者。
2、默认情况下,只要导入了组件,不管组件有没有显示在页面中,组件的样式就会生效。
- 解决方案:
- 手动处理 (起不同的类名,但是项目一大就会导致类名很乱,不利于团队协作)
CSS IN JS: 以js的方式来处理css(推荐)- css不是一门编程语言,css没有所有的局部作用域全局作用域这样的区分。。。css只有全局作用域
CSS IN JS
一、概念
- CSS IN JS:是使用 JavaScript 编写 CSS 的统称,用来解决 CSS 样式冲突、覆盖等问题
- CSS IN JS 的具体实现有 50 多种,比如:React常用(CSS Modules、styled-components)、 Vue常用(
<style scoped>、css modules)等 - 推荐使用:CSS Modules (React脚手架已集成,可直接使用)
二、CSS Modules
- CSS Modules 通过对 CSS 类名重命名,保证每个类名的唯一性,从而避免样式冲突的问题
- 换句话说:所有类名都具有“局部作用域”,只在当前组件内部生效
- 在 React 脚手架中:文件名、类名、hash(随机)三部分,只需要指定类名即可 BEM
xxxx.module.css
1、自动生成的类名,我们只需要提供 classname 即可
[filename]_[classname]_[hash]
2、
类名:.error {}.red{}
实际生成的类名为:.NavHeader_error__ax7yz.NavHead_red_abcdc(相同命名的类名,经过module处理以后,会生成不同的实际类名,特殊标识)
三、在项目中使用css Modules
- 创建名为
[name].module.css的样式文件(React脚手架中的约定,与普通 CSS 作区分) - 组件中导入该样式文件(注意语法)
- 通过 styles 对象访问对象中的样式名来设置样式

css module的注意点:
- 类名最好使用驼峰命名,因为最终类名会生成
styles的一个属性.tabBar {}=>styles.tabBar - 如果没有使用驼峰命名,对于不合法的命名,需要使用[]语法
.tab-bar {}=>styles['tab-bar'] - 如果是全局的类名,应该使用
:global(.类名)的方式,不然会把全局类名给修改掉
:global(.icon-map) { }这样css modules就不会修改掉类名了
四、css module配合sass
- css moudule也可以配合sass来使用,创建名为
[name].module.scss - 使用css modules解决Login组件样式冲突问题
- 如果sass文件中使用到了链接,需要使用绝对路径
~

五、module.scss 使用步骤:


六、总结
React样式冲突总结:
- sass和CSS Moudles 的搭配使用,解决了React中样式冲突的问题。
- 我们仍然可以在不同组件中使用相同类名,但我们需要知道,名字相同的类名在Moudle的作用下,实际类名并不相同,以此确保了,样式只在当前组件内生效。
- React采取的是组件化编程,组件和组件对应的样式会放在同一个组件文件夹下。
- 但我们仍然需要知道:在最后编译打包之后,所有组件的解构和样式,都会打包在同一个html页面中。
相关文章:
React解决样式冲突问题的方法
React解决样式冲突问题的方法 前言: 1、React最终编译打包后都在一个html页面中,如果在两个组件中取一样类名分别引用在自身,那么后者会覆盖前者。 2、默认情况下,只要导入了组件,不管组件有没有显示在页面中&#x…...
Go项目(用户操作微服务)
简介 用户留言、收藏、修改收货地址等,统一放在用户操作微服务这里按照业务类型划分微服务表设计,三张表// 用户收藏 type UserFav struct {BaseModel// 联合索引 idx_user_goods,且唯一User int32 gorm:"type:int;index:idx_user_goo…...
Spring Boot统一功能处理
目录 一、统一用户登录权限验证 1.1 自定义拦截器 1.2 将自定义拦截器加入到系统配置 1.3 统一访问前缀 二、统一异常处理 三、统一数据格式返回 一、统一用户登录权限验证 1.1 自定义拦截器 拦截器是一个普通的类,需要实现HandlerInterceptor接口并重写pre…...
ETCD多次出现CONTEXT DEADLINE EXCEEDED
roothqa-master-01:~# etcdctl --endpoints$ETCD_ENDPOINTS member list --write-outtable {“level”:“warn”,“ts”:“2020-03-23T14:19:45.0330800”,“caller”:“clientv3/retry_interceptor.go:61”,“msg”:“retrying of unary invoker failed”,“target”:“endpoi…...
git 提交 多人开发避免冲突
代码正常提交 git add . git commit -m ‘备注信息’ git status 查看本地提交状态 git pull 拉取代码 git push origin master 指定远程仓库名和分支名 ‘’ 如果多人开发 A和B 提交避免冲突 B拉取代码修改内容直接提交后 A也修改了内容在git add / git commit / git pull / g…...
求职复盘:干了四年外包出来,面试5次全挂
我的情况 大概介绍一下个人情况,男,毕业于普通二本院校非计算机专业,18年跨专业入行测试,第一份工作在湖南某软件公司,做了接近4年的外包测试工程师,今年年初,感觉自己不能够再这样下去了&…...
AXI总线核心解读---基于官方文档
AXI总线 何处使用AXI ZYNQ异构芯片,内部总线使用的AXI总线纯FPGA的IP接口也要用高速接口,DDR(AXI、传统)等模块都有涉及到 什么是AXI总线 AXI的三种形式: AXI-FULL:高性能的存储器映射需求—可以256个以内发送 存储器…...
【Linux修炼】15.进程间通信
每一个不曾起舞的日子,都是对生命的辜负。 进程间通信进程间通信一.理解进程间通信1.1 什么是通信1.2 为什么要有通信1.3 如何进行进程间通信二.管道2.1 匿名管道2.2 匿名管道编码部分2.3 管道的特点2.4 如何理解命令行中的管道2.5 进程控制多个子进程三.命名管道3.…...
每天一道大厂SQL题【Day15】微众银行真题实战(五)
每天一道大厂SQL题【Day15】微众银行真题实战(五) 大家好,我是Maynor。相信大家和我一样,都有一个大厂梦,作为一名资深大数据选手,深知SQL重要性,接下来我准备用100天时间,基于大数据岗面试中的经典SQL题&…...
如何优化查询大数据量的表
给你100万条数据的一张表,你将如何查询优化?1.两种查询引擎查询速度(myIsam 引擎 )InnoDB 中不保存表的具体行数,也就是说,执行select count(*) from table时,InnoDB要扫描一遍整个表来计算有多…...
卷麻了,00后Jmeter用的比我还熟练,简直没脸见人......
经常看到无论是刚入职场的新人,还是工作了一段时间的老人,都会对测试工具的使用感到困扰?前言性能测试是一个全栈工程师/架构师必会的技能之一,只有学会性能测试,才能根据得到的测试报告进行分析,找到系统性…...
力扣-树节点
大家好,我是空空star,本篇带大家了解一道中等的力扣sql练习题。 文章目录前言一、题目:608. 树节点二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其他总结前言 …...
MySQL8启动错误“Neither found #innodb_redo subdirectory, nor ib_logfile* files”
今天做MySQL备份文件回复测试,用来检验MySQL备份文件可用性。 MySQL版本8.0.32 备份文件为腾讯云MySQL实例,版本8.0 使用xtrabackup恢复备份。执行过程顺利,启动MySQL时发生错误。提示如下: 注意,这里使用了systemctl stop mysql。虽然启动失败了,但是如果不执行这条…...
JVM系列——详细说明Volatile,原子性/可见性,先行发生原则
上篇我们讨论了JMM中的工作内存和主内存、内存直接的交互指令,以及指令之间的顺序规则。 本篇将会以上篇为基础,详细介绍并发编程中的三个重要概念/工具:Volatile、原子性/可见性和先行发生(happens-before)原则。 volatile型变量…...
ArcGIS:栅格计算器的运算符和函数详解
01 栅格计算器在哪?02 运算符说明栅格计算器的表达式书写与Python语法一致(由于其为解释型语言并且语言简洁优美,因此简单上手),这里主要简单说明各个运算符即可使用栅格计算器构建地图代数表达式以输出要求的栅格图像…...
spring的beanfactory与applicationContext的区别以及继承关系
applicationContext继承关系 首先可以看一张图 ListableBeanFactory 可列举的bean工厂 hierarchical 分层bean工厂 messageSource 国际化信息 //国际化(internationalization)是设计和…...
分享一个 hive on spark 模式下使用 HikariCP 数据库连接池造成的资源泄露问题
最近在针对某系统进行性能优化时,发现了一个hive on spark 模式下使用 HikariCP 数据库连接池造成的资源泄露问题,该问题具有普适性,故特地拿出来跟大家分享下。 1 问题描述 在微服务中,我们普遍会使用各种数据库连接池技术以加快…...
MySQL 行锁
行锁 : 对表中行记录的锁 MySQL 的行锁 : 由各个引擎自己实现MyISAM 不支持行锁InnoDB 支持行锁 两阶段锁协议 : 行锁是在需要时才加上,要等到事务结束才释放 例子 : id 是表 t 的主键的 B 的 update 会阻塞,直到 A 执行 commit 后,B 才能…...
成为AI架构师的三大能力
AI架构师的定义 “AI 架构师”是以深度学习为代表的第三次AI热潮所催生的新型复合型人才,它的产生最本质的驱动因素是AI产业化落地应用的蓬勃发展对人才的需求,深度学习突出的工程属性也特别需要复合型人才来驾驭。 从字面来看,AI架构师的“…...
博客系统 实现 (前端 + 后端 )代码
文章目录博客系统前端代码 :1. add.html2. blog_detail.html3. blog_edit.html4. blog_list.html5. login.htmlcss 文件1. blog_detail.css2. blog_edit.css3. blog_list.css4. common.css5. login.css6. 分页器使用的 css后端代码1.config 包1.1 AppConfig类1.2 Lo…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
云原生周刊:k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi(原名 k8s‑vGPU‑scheduler)是一款 CNCF Sandbox 级别的开源 K8s 中间件,通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度,为容器提供统一接口,实现细粒度资源配额…...
