如何修改引用组件库生成的元素样式

我们在使用第三方组件库里面的组件时，可能会对它的一些样式不太满意，但是我们又无法直接在style里面直接修改。这里总结出几种修改方式，希望能够对你有用。

方式1：用js修改。

一般来说用js改是可行的，直接根据自动生成的元素class名改写

image.png 不但是这样有两个弊端：一是元素难以定位，比如上面这个截图里面的例子，用了三个firstchild才定位到；二是伪类元素无法修改，因为js只能修改元素的样式，伪类都不是元素，是”伪“的元素，获取都获取不到更不用说修改了。这个不推荐使用。

方式2：把样式写在不加scoped的style标签里面。

后来找到一种比用js更好的方式，那就是把需要改的样式写在不加scoped的style标签里面。

image.png 找到需要修改的元素类名，直接写想要的样式即可，相比用js来写特别方便
具体参考：https://www.cnblogs.com/linjiangxian/p/11457602.html

但是这种方法也有一个弊端，那就是style标签不加scope会导致这里面的样式影响全局，所以也不推荐使用

方式3：使用/deep/

在使用组件的父级和组件生成的类选择器中间加 /deep/

image.png

这种方式是把样式写在带scope的style标签里面，不会污染全局，也不会像js那样难以定位，强烈推荐。不过这种方式我也只是刚会用，了解的不多，这里就不多说了，以免误人子弟，需要用小伙伴可以去搜一下