Vue中修改组件库(如element ui)样式的可行方案

如何在vue中修改组件库的样式？

vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。
但是，不管我们使用element ui、vuetify或是别的什么组件库，修改样式是必不可少的一个工作。
针对公司自己的风格或是ui的设计，组件库默认的样式、配色等并不一定符合所有人的要求，那么修改组件库的样式就成了必不可少的一部分。
就拿 element ui 组件举例，这里描述几种经测试有效的解决方案：

1. deep ：这里参考以前自己写过的一篇博文 浅析deep。
   缺点：并不能解决所有样式的修改，只针对部分样式有效；

2. custom-class ：饿了么组件库的一些组件，提供了一个自定义类名的属性，我们通过属性添加一个类名，然后通过这个类名修改对应的这个组件的样式；
   缺点：饿了么并不是所有组件都提供自定义类名的属性，针对未提供该属性的组件，我们无法做到修改该组件的样式；
   

   在这里插入图片描述

3. 全局样式 ：归根结底，无法修改样式还是因为作用域导致，假如我们有个公共的全局css文件(index.css)，我们可以在控制台找到对应组件的样式，然后通在全局文件中重写/添加/修改该组件的样式，就可以正常改变组件的样式了；
   缺点：因为是全局文件，所以针对每个地方的同组件都生效，举个例子，当我们在多处使用了弹框组件，因为全局已经给定了样式，就无法做到每个地方的弹框样式不同的效果，当我们需要多处样式不同时，这种方法无疑会限制我们；
   

   在这里插入图片描述

4. scoped ：我们知道，vue每个文件的样式部分都会有个scoped属性，该属性限制样式只在当前文件所在的作用域生效，而不会影响其他地方，虽然这样避免了样式冲突的问题，但是这也是制约我们不能修改组件库样式的问题来源，我们可以通过去掉scoped属性，借此来达到修改组件库样式的目的，为了避免样式冲突，我们可以采取sass嵌套书写样式，既可以完美修改组件库的样式，又能避免样式冲突，这也是博主项目中最常用的一种方式；
   

   在这里插入图片描述

5. 双重style ：比较新奇的一种写法。当我们不想去掉scoped属性时，我们可以采取这种写法，在原有文件的样式标签里嵌套一个不带scoped的style标签，来写我们需要修改的组件库的样式。
   缺点：多重style会让人感觉代码冗余。
   

   在这里插入图片描述

好了，以上就是博主针对修改组件库样式总结的一些可行方案，希望对你有帮助。
如有问题，请指出，接受批评。