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;
 }
相关推荐
conkl8 分钟前
梅森旋转算法深度解析:构建更健壮的前端请求体系
前端·算法·状态模式
z***39621 小时前
Plugin ‘org.springframework.bootspring-boot-maven-plugin‘ not found(已解决)
java·前端·maven
e***58231 小时前
Nginx 配置前端后端服务
运维·前端·nginx
小奶包他干奶奶1 小时前
Webpack学习——Plugin(插件)
前端·学习·webpack
张拭心1 小时前
AI 从业者需要铭记的时刻:2023年6月30日
前端·ai编程
我叫张小白。1 小时前
Vue3 Hooks:逻辑复用的解决方案
前端·javascript·vue.js·前端框架·vue
S***t7141 小时前
前端物联网开发
前端·物联网
我叫张小白。1 小时前
Vue3 Props 的使用:组件间数据传递的桥梁
前端·javascript·vue.js·vue3
r***86981 小时前
Nginx解决前端跨域问题
运维·前端·nginx
广州华水科技2 小时前
单北斗GNSS在桥梁变形监测中的关键应用与技术优势分析
前端