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

相关文章

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf