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;
 }
相关推荐
linux_cfan11 分钟前
videojs v10 源代码系列解读:30 · `SerialRunner` 与 `ConcurrentRunner`
前端
liangshanbo121511 分钟前
面试题:页面需要发起大量 Ajax / HTTP 请求时,如何优化请求性能?
前端·http·ajax
lyz24685941 分钟前
vue3页面因参数未声明而报错的常犯错误
前端·javascript·vue.js
摸爬滚打的小李1 小时前
流程图同步AI生成
前端
Hilaku1 小时前
我重写了整个项目,但没人感谢我!
前端·javascript·程序员
zach2 小时前
Vue/React SPA 打包部署后,子路由刷新 401 未登录问题彻底解决
前端·nginx·next.js
旋生万物2 小时前
素数螺旋映射 $z_n=n^{1+i}$ 的角分布统计检验与零模型对比
大数据·前端·人工智能·算法·云原生·螺旋生成论·螺旋相位
亿元程序员2 小时前
游戏引擎都没用!纯AI又上线了一款蚂蚁搬家小游戏!
前端
福兮说2 小时前
JS 正则的六个坑:带 g 的 test() 一真一假、空匹配死循环、replace 里的 $
开发语言·前端·javascript·正则表达式
码艺-Alimjan2 小时前
Web 网站打包桌面应用的另一种方式,超级简单(C# exe 33Kb)
开发语言·前端·c#