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;
 }
相关推荐
用户2526327534713 分钟前
如何实现MySQL多表联查
前端
今天AI了吗18 分钟前
【AI】一文讲清 RAG:从大模型局限到企业级知识库落地流程
前端·javascript·人工智能·python·深度学习·机器学习·easyui
hunterandroid20 分钟前
[鸿蒙从零到一] HarmonyOS 冷启动瀑布图分析与关键路径裁剪实战
前端·华为
郭邯24 分钟前
用 Canvas 实现纯前端图片格式互转:PNG/JPG/WebP 一键切换,还能控制质量与尺寸
前端
cindershade26 分钟前
把响应式做成可验证的状态切换:Container Queries 的组件级重构方法
css·flexbox·前端工程化
工边页字29 分钟前
Electron应用的8种防护方式
前端·javascript·electron
labixiong37 分钟前
z-index: 99999 输给 z-index: 2?原生弹窗的 Top Layer 排位战:后进者居上、看得见却点不着
前端·html
deli00738 分钟前
CSS 渐变生成器:拖两个颜色直接给代码,做按钮背景不用手写
前端
芳心粽伙饭43 分钟前
HTML第八章 表单标签
前端·html