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;
 }
相关推荐
coderCN5 分钟前
Nodejs 第三十四章 数据库(表达式和函数、子查询和连表)
前端·node.js
ssshooter1 小时前
AI 时代你不能不知道的 git worktree
前端·后端·面试
观测云1 小时前
AI时代的用户访问监测:观测云带你身临其境体验用户与前端UI交互旅程
前端·可观测性·观测云·rum
喵本喵叁肆1 小时前
06-M6-部门过滤与综合研判-从问答机到研判助手
前端·javascript·jquery
TomEval2 小时前
【Web UI 自动化】05 - KDT 模式原理与实现
前端·ui·自动化
南雨北斗2 小时前
vue3项目状态持久化方案Pinia
前端
计算机魔术师2 小时前
Uber 工程师不动手,Agent 接管了 70% 的代码 PR
前端
南雨北斗2 小时前
Vue3项目中使用Pinia代替TP6 session传递
前端
律宏阔2 小时前
Electron 打包 CloakBrowser:解决客户电脑缺少浏览器二进制的问题
前端