在vue项目中使用第三方插件,需要根据项目要求修改插件样式,有时候无法修改成功,为什么呢?因为有scoped保护,因此我们需要scoped穿透。
1、什么是scoped?它的作用是什么?
<style scoped>
</style>
在vue组件样式中使用scoped,相当于将样式私有化,即样式只用于与当前组件。
通过该属性,可以使得组件之间的样式不互相污染。
2、为什么需要穿透scoped?
一般项目中会引用了第三方组件,需要根据需求在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。就需要样式穿透啦
3、如何进行穿透?
1)、使用>>>
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>
2)、使用/deep/
<style scoped>
/deep/ 第三方组件 {
样式
}
</style>
3)、在定义一个不含有scoped属性的style标签(相当于全局样式)
<style>
全局样式
</style>
<style scoped>
作用于当前组件
</style>
以上三种方法都可以实现修改第三方插件样式,但个人建议使用前两种方法。