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;
 }
相关推荐
祈澈菇凉1 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇1 小时前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js
java1234_小锋2 小时前
一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密
前端·python·flask·flask3
化作繁星2 小时前
如何在 React 中测试高阶组件?
前端·javascript·react.js
初遇你时动了情2 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
Au_ust2 小时前
千峰React:函数组件使用(2)
前端·javascript·react.js
爱吃南瓜的北瓜2 小时前
npm install 卡在“sill idealTree buildDeps“
前端·npm·node.js
TTc_2 小时前
记录首次安装远古时代所需的运行环境成功npm install --save-dev node-sass
前端·npm·sass
翻滚吧键盘2 小时前
npm使用了代理,但是代理软件已经关闭导致创建失败
前端·npm·node.js
烂蜻蜓2 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html