Vue中scoped穿透 修改第三方插件样式

在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>

以上三种方法都可以实现修改第三方插件样式，但个人建议使用前两种方法。

• 点赞
• 收藏
• 分享
• 文章举报