文章目录
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过一些方法,穿透scoped。
>>>
如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改
深度作用选择器
>>>
可用于項目中的css原生样式,那么可以直接使用>>>
但如果是sass/less的话可能无法识别,这时候需要使用/deep/
和::v-deep
选择器。
想修改element-ui某个深层元素也有其他方式解决;
解决方法:将 scoped 移除,
或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style scoped>
.a {
//b是第三方组件类名
>>> .b {
background:orange;
}
}
</st
</style>
有些Sass 、Less之类的预处理器无法正确解析 >>>
。可以使用/deep/
操作符 或者::v-deep
( 都是>>>
的别名)
/deep/
<style lang="sass" scoped>
/*用法1*/
.a {
//b是第三方组件类名
/deep/ .b {
background:orange;
}
}
/*用法2*/
.a /deep/ .b {
background:orange;
}
</style>
::v-deep
<style lang="scss" scoped>
/*用法1*/
.a {
//b是第三方组件类名
::v-deep .b {
background: orange;
}
}
/*用法2*/
.a ::v-deep .b {
background: orange;
}
</style>
vue3.0的环境下,安装项目时选择了dart-sass
,这个不支持/deep/
和>>>
的写法,只能用::v-deep
,选择node-sass
就不会有这个问题
建议使用第二种方式,·/deep/
在某些时候会报错,::v-deep
更保险并且编译速度更快.
在这里插入代码片
scoped
当style标签具有该scoped属性时,其CSS将仅应用于当前组件的元素。
作用功能:
实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块虽然方便但是我们需要慎用,因为当我们使用公共组件时会造成很多困难,增加难度,想知道造成那些难度,需要先从scoped实现原理了解