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.cppcns.com/wangluo/javascript/697363.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1153106

相关文章

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Python中ModuleNotFoundError: No module named ‘timm’的错误解决

《Python中ModuleNotFoundError:Nomodulenamed‘timm’的错误解决》本文主要介绍了Python中ModuleNotFoundError:Nomodulen... 目录一、引言二、错误原因分析三、解决办法1.安装timm模块2. 检查python环境3. 解决安装路径问题

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解