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 分钟前
Claude Code 未登录 使用第三方模型
前端
岭子笑笑2 分钟前
Vant4源码阅读之Upload
前端
Highcharts.js3 分钟前
经验值|React 实时数据图表性能为什么会越来越卡?
前端·javascript·react.js·数据可视化·实时数据
3秒一个大3 分钟前
深入理解 Node.js:生态体系与事件循环机制详解
前端·后端·node.js
freewlt6 分钟前
前端工程化进阶:Monorepo 架构实战指南
前端·架构
三翼鸟数字化技术团队11 分钟前
DepSleuth - 前端依赖分析工具的技术原理与实践
前端
慧一居士11 分钟前
pinia-plugin-persistedstate 在nuxt4项目中服务端渲染,不能使用window对象原因
前端·vue.js
子兮曰14 分钟前
同样做中文平台自动化:为什么你越跑越贵,而 OpenCLI 越跑越稳
前端·github·命令行
小陈工15 分钟前
2026年4月1日技术资讯洞察:AI芯片革命、数据库智能化与云原生演进
前端·数据库·人工智能·git·python·云原生·开源
酉鬼女又兒17 分钟前
零基础快速入门前端深入掌握箭头函数、Promise 与 Fetch API —— 蓝桥杯 Web 考点全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·css·职场和发展·蓝桥杯·es6·js