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;
 }
相关推荐
huakoh13 小时前
MCP 到底解决了什么问题:从协议设计到官方 Python SDK 最小实现
前端
用户0595401744613 小时前
用了半年 LangChain Memory,才发现记忆总“串台”——3 个自动化测试避坑指南
前端·css
大爱编程♡13 小时前
Vue3基础
前端·javascript·vue.js
weedsfly13 小时前
防抖与节流:从原理到 React Hook 封装
前端·javascript·面试
甜味弥漫13 小时前
React 从类组件到 Hooks:为什么 Hooks 改变了 React?
前端·javascript·react.js
天蓝色的鱼鱼13 小时前
让 AI 写代码半年后,我发现了几个藏在项目里的安全隐患
前端·javascript·ai编程
随风一样自由14 小时前
【前端+跨端技术新格局】Tauri vs Electron 完整性能对比(2026实测数据+底层原理)
前端·javascript·electron
L-影14 小时前
Pydantic 模型:为你的 Web 数据装上“安检系统”
前端
Reload.14 小时前
GJ航司,验证码网易易盾 JS逆向 纯算轨迹
开发语言·前端·javascript
L-影14 小时前
FastAPI 请求头与 Cookie:Web 世界的“身份证”与“通行证”
前端·fastapi