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;
 }
相关推荐
Eason_Lou11 小时前
vue flow使用注意事项
前端·vue.js
小赵同学WoW12 小时前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_12 小时前
C# 上位机(持续更新中)
前端·面试·c#
风雨_12 小时前
Git Worktree sourcetree完整使用指南
前端
半个落月12 小时前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
用户9210802628612 小时前
ChatComposer 输入区改造:基于技能市场实现 Agent 输入框
前端
用户459892045651612 小时前
一套 KMP 多仓库版本治理工作流:用 Version Catalog + CI 把发版流水线自动化
前端·kotlin
小赵同学WoW12 小时前
1-4 TypeScript 中的 `number`、`bigint` 与 `string`
前端
小赵同学WoW13 小时前
1-3 `boolean` 与字面量类型
前端
光影少年13 小时前
react navite 长列表优化:FlatList / SectionList 原理与优化属性
前端·react native·react.js