【Vue.js】如何修改第三方组件库默认样式及修改失效原因

在vue项目开发中，我们经常需要用到第三方组件库，如elementUI、Vant等，这些组件的特点之一是样式都是封装好的，有时候组件的默认样式和我们需要的样式会有一些差别，这时就需要做一些修改。

一、修改组件默认样式

首先我们随便用一个组件来举个例子，就用elementUI主要按钮吧。

默认是蓝色背景高度40的，现在我们想让它变成粉色背景，高度30。

这时我们可以通过检查网页的元素获取组件的类名，得到这个按钮组件的类名有"el-button" 和 "el-button--primary" 。

image.png

我们选择哪个都可以添加样式，为了不影响其它类型的按钮，我们就把样式加给"el-button--primary"类吧。

看上去毫无问题，可是我们的修改却失败了。

甚至连检查元素发现我们写的属性根本没有加上去：

二、失败原因及注意事项

其实我们修改方法并没有问题，问题出在了scoped身上，大家都知道在style标签上加上这个是控制所写的样式不影响其它页面（或组件），可是第三方组件库的东西，其实是一个我们引入的、外来的、写好的组件啊，准确地说它并不是我们当前这个页面（组件）的内容，scoped只影响当前页面（组件），所以我们在scoped里肯定修改不到第三方组件的样式。

所以这时候我们就要去掉scoped，为了不影响当前页面其它内容，我们可以再写一个不带scoped的style标签，同时，为了不污染项目中其它地方使用的到的第三方组件，我们一定要加上一个独有的类名，比如我写的这个组件的类名index-wrap。
当然，如果确定整个项目的这个组件都要改，我们也可以直接写到公共样式文件里。
现在修改如下：

现在可以看到我们的自定义样式已经添加上去了，其它的第三方组件修改方法也是一样的~ 可以根据自己的需求修改。

image.png