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

相关文章

Git提交代码详细流程及问题总结

《Git提交代码详细流程及问题总结》:本文主要介绍Git的三大分区,分别是工作区、暂存区和版本库,并详细描述了提交、推送、拉取代码和合并分支的流程,文中通过代码介绍的非常详解,需要的朋友可以参考下... 目录1.git 三大分区2.Git提交、推送、拉取代码、合并分支详细流程3.问题总结4.git push

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

使用TomCat,service输出台出现乱码的解决

《使用TomCat,service输出台出现乱码的解决》本文介绍了解决Tomcat服务输出台中文乱码问题的两种方法,第一种方法是修改`logging.properties`文件中的`prefix`和`... 目录使用TomCat,service输出台出现乱码问题1解决方案问题2解决方案总结使用TomCat,

解决Spring运行时报错:Consider defining a bean of type ‘xxx.xxx.xxx.Xxx‘ in your configuration

《解决Spring运行时报错:Considerdefiningabeanoftype‘xxx.xxx.xxx.Xxx‘inyourconfiguration》该文章主要讲述了在使用S... 目录问题分析解决方案总结问题Description:Parameter 0 of constructor in x

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时

Java循环创建对象内存溢出的解决方法

《Java循环创建对象内存溢出的解决方法》在Java中,如果在循环中不当地创建大量对象而不及时释放内存,很容易导致内存溢出(OutOfMemoryError),所以本文给大家介绍了Java循环创建对象... 目录问题1. 解决方案2. 示例代码2.1 原始版本(可能导致内存溢出)2.2 修改后的版本问题在

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法:数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高;分治法高效但实现复杂;位图法可读性差,但存储空间受限... 目录三种方法:方法概要数据库排序(http://www.chinasem.cn对数据库设备要求较高)分治法(常

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代