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;
 }
相关推荐
Csvn26 分钟前
原型链、this 与闭包内存:三座深水区一次打通(含内存泄漏排查实战)
前端·javascript
葡萄城技术团队38 分钟前
如何通过 JSON 数据源 / Web API 快速构建轻量级报表(Report)?
前端·json·原型模式
浪兎兎1 小时前
【Java Web】Servlet + JSP 笔记
java·前端·servlet
Patrick_Wilson2 小时前
iOS Safari Clipboard API 权限弹窗问题
前端·ios·safari
OpenTiny社区2 小时前
Naive UI × GenUI SDK:自定义物料库搭建实战
前端·ai编程
kyriewen3 小时前
我拿 4 个真实前端任务试了 GLM-5.3 Flash:代码一遍跑通,账单 4 分钱
前端·程序员·ai编程
IT_陈寒3 小时前
Vue的响应式更新有时候真的不听话
前端·人工智能·后端
风骏时光牛马3 小时前
AI编程常见问题梳理与要点解析
前端
前端snow3 小时前
ai agent -- LCEL 汇总
前端
计算机魔术师3 小时前
NVIDIA 季度营收指引达 1080 亿美元,首次突破单季千亿大关
前端