vue解决子组件样式覆盖问题scoped deep

2025-01-17 16:50

本文主要是介绍vue解决子组件样式覆盖问题scoped deep,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件...

前言

在项目开发过程中,经常会遇到需要在父组件内部覆盖子组件样式的场景,这种场景在使用第三方库开发时更为常见。

如何处理好全局样式和局部样式对于长期更新维护的项目来说是非常重要的。

scoped分析

对于SPA项目,只有一个页面,页面内容被拆分成了一个个组件,组件加载完成后,组件的样式也都加载在同一个页面内,所以这些组件的样式都可以看成全局样式,对其他组件都有效,要避免当前组件的样式对其他组件产生污染,就要把每个组件的样式独立开。

如果style添加scomJQYlped,当前组件所有标签都会添加一个data-v-hash的属性,hash值每个组件都不同

vue解决子组件样式覆盖问题scoped deep

css编译后,会在最后一级选择器后加一个属性选择python

vue解决子组件样式覆盖问题scoped deep

这样每个组件都有唯一的属性选择器,就可以避免对其他组件产生影响

deep分析

deep是常用来样式穿透,覆盖子组件加了scoped的样式或者第三方组件的样式。

vue解决子组件样式覆盖问题scoped deep

上图中span为子组件,父组件样式加了scoped,子组件只有最外层元素添加了父组件的data-v-hash属性,如果只是需改最外层元素样式,不需要加deep,但是如果修改内部元素,直接使用类选择器是无效的。比如通过父元素类型panel修改类名ant-input的元素,最终的样式被编译为

vue解决子组件样式覆盖问题scoped deep

子组件内部元素没有data-v-hash属性,所以样式不生效。

如果使用deep:

vue解决子组件样式覆盖问题scoped deep

最终样式会被编译为:

vue解决子组件样式覆盖问题scoped deep

属性选择器只加在deep前的元素上,因此会影响子组件样式。

使用总结

所有组件必须加scoped

如果没有加scoped? 打开一个界面突然发现A组件样式被其他组件权重更高的样式覆盖了,然后为了让A原本的样式生效,给A原本的样式加个更大的权重,接着又发现在B组件内部原本要覆盖A组件的一些样式,因为A组件样式权重变大而失效了。如果组件层级很深,子组件的最终样式来源js可能要向上翻十八辈祖宗啊,真一点不夸张。

当然也有同学喜欢不加scoped,样式最外层加个唯一的id选择器来避免对其他组件禅城影响,这样也可以达到效果,而且修改子组件样式的话会比较简单,但是自定义的id没办法全局管理,难以避免id重复的问题。

父组件覆盖子组件使用deep

第三方库一般会有全局样式覆盖,不过是针对全局的样式,局部样式还是不要放在common.less里。使用deep需要注意两点:

1、给组件额外加个类名,使用当前组件自定义类型进行样式覆盖

比如父元素为.father,如果覆盖ant design vue 的select组件,select组件最外层元素为.ant-select,我们直接使用.father /deep/ .ant-select { color: wisdom } 这样是可以生效的,但是对于.father下的所有子组件以及子孙后代组件,只要使用了select组件,{ color: wisdom }这个样式都是有效的,这样显然也不合理,为了不影响后代的组件,给smJQYlelect加个跟当前业务相关的类名,使用自定义类名覆盖样式,如.father /deep/ .father-child-select { ... }。PS:我也尝试过使用>选择器加/deep/一起使用,奈何无效。

2、/deep/ 嵌套使用在新版chrome浏览器样式会失效,避免嵌套使用

以前嵌套使用是没问题的,后来遇到某个版本样式失效了

PS:

样式覆盖只要选择器匹配上了,其他无非是权重问题,组件慎用!www.chinasem.cnimportant

以上为个人经验,希望能给大家一个参考,也希望大家多多支持China编程(www.chinasem.cn)。

这篇关于vue解决子组件样式覆盖问题scoped deep的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153106

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复