问题:在vue中 引用第三方组件库,在当前页面修改第三方组件库的样式并且不污染全局样式

一般修改单页面的样式且不污染全局样式的做法是

在样式标签上使用 scoped 但是在引用第三方组件库时 添加scoped 再修改组件样式时不起作用

解决办法:

1、在样式标签上使用 scoped

2、通过 >>> 穿透 scoped

<style scoped>
    外层 >>> 第三方组件类名{
        样式
    }
</style>

有些Sass、Lass之类的预处理器无法正确解析 >>> 可以使用 /deep/ 操作符

穿透方法实际上违反了scoped属性的意义

另一种方式是 不使用scoped ,通过在外层dom上添加唯一的class来区分组件+第三方样式来实现类似于scoped的操作

https://blog.csdn.net/idomyway/article/details/94659598