scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题

开发中经常会用到深度选择器来修改第三方组件库等子组件的样式,这时候就用到样式穿透(style Penetration)

样式穿透的方式有:>>>、 /deep/、::v-deep这三种

使用中发现了一个问题,就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时,会影响到子组件中的样式,

第一种方式:

使用>>>修改无效,原因是scss等预处理器却无法解析>>>

第二种:

而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。

第三种,使用::v-deep,

使用方式:要修改的元素外层套一层box,修改样式时加在选择器前,这样就可以将要修改的的元素限制在当前文件,如下,需要修改class为v-tabs__nav的元素时:

javascript 复制代码
 .tabs-wrap ::v-deep.v-tabs__nav{
   background-color: transparent !important;
 }
相关推荐
汪子熙2 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315239 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple16 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua23 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风23 分钟前
录音实时上传
前端·javascript
江号软件分享27 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长36 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享1 小时前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士2 小时前
flex 布局完整功能介绍和示例演示
前端