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

╰+攻爆jí腚メ 2021-08-29 14:36 458阅读 0赞

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

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

1.  deep ：这里参考以前自己写过的一篇博文 [浅析deep][deep]。  
    缺点：并不能解决所有样式的修改，只针对部分样式有效；
2.  custom-class ：饿了么组件库的一些组件，提供了一个自定义类名的属性，我们通过属性添加一个类名，然后通过这个类名修改对应的这个组件的样式；  
    缺点：饿了么并不是所有组件都提供自定义类名的属性，针对未提供该属性的组件，我们无法做到修改该组件的样式；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]
3.  全局样式 ：归根结底，无法修改样式还是因为作用域导致，假如我们有个公共的全局css文件(index.css)，我们可以在控制台找到对应组件的样式，然后通在全局文件中重写/添加/修改该组件的样式，就可以正常改变组件的样式了；  
    缺点：因为是全局文件，所以针对每个地方的同组件都生效，举个例子，当我们在多处使用了弹框组件，因为全局已经给定了样式，就无法做到每个地方的弹框样式不同的效果，当我们需要多处样式不同时，这种方法无疑会限制我们；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]
4.  scoped ：我们知道，vue每个文件的样式部分都会有个scoped属性，该属性限制样式只在当前文件所在的作用域生效，而不会影响其他地方，虽然这样避免了样式冲突的问题，但是这也是制约我们不能修改组件库样式的问题来源，我们可以通过去掉scoped属性，借此来达到修改组件库样式的目的，为了避免样式冲突，我们可以采取sass嵌套书写样式，既可以完美修改组件库的样式，又能避免样式冲突，这也是博主项目中最常用的一种方式；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]
5.  双重style ：比较新奇的一种写法。当我们不想去掉scoped属性时，我们可以采取这种写法，在原有文件的样式标签里嵌套一个不带scoped的style标签，来写我们需要修改的组件库的样式。  
    缺点：多重style会让人感觉代码冗余。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]  
    好了，以上就是博主针对修改组件库样式总结的一些可行方案，希望对你有帮助。  
    如有问题，请指出，接受批评。  
    个人微信公众号：  
    ![在这里插入图片描述][20200824114110247.png_pic_center]

[deep]: https://blog.csdn.net/qq_43363884/article/details/88545876
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200521100019878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200521095934544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200521095851665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200521095739775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0,size_16,color_FFFFFF,t_70#pic_center
[20200824114110247.png_pic_center]: https://img-blog.csdnimg.cn/20200824114110247.png#pic_center