在vue项目开发中，我们经常需要用到第三方组件库，如elementUI、Vant等，这些组件的特点之一是样式都是封装好的，有时候组件的默认样式和我们需要的样式会有一些差别，这时就需要做一些修改。
一、修改组件默认样式
首先我们随便用一个组件来举个例子，就用elementUI主要按钮吧。
<template>
<div class="index-wrap">
<el-button type="primary">我是一个主要按钮</el-button>
</div>
</template>
默认是蓝色背景高度40的，现在我们想让它变成粉色背景，高度30。
这时我们可以通过检查网页的元素获取组件的类名，得到这个按钮组件的类名有"el-button" 和 "el-button--primary" 。
image.png
我们选择哪个都可以添加样式，为了不影响其它类型的按钮，我们就把样式加给"el-button--primary"类吧。
<style scoped>
.el-button--primary {
background: pink;
border-color: pink;
height: 30px;
}
</style>
看上去毫无问题，可是我们的修改却失败了。
甚至连检查元素发现我们写的属性根本没有加上去：
二、失败原因及注意事项
其实我们修改方法并没有问题，问题出在了scoped身上，大家都知道在style标签上加上这个是控制所写的样式不影响其它页面（或组件），可是第三方组件库的东西，其实是一个我们引入的、外来的、写好的组件啊，准确地说它并不是我们当前这个页面（组件）的内容，scoped只影响当前页面（组件），所以我们在scoped里肯定修改不到第三方组件的样式。
所以这时候我们就要去掉scoped，为了不影响当前页面其它内容，我们可以再写一个不带scoped的style标签，同时，为了不污染项目中其它地方使用的到的第三方组件，我们一定要加上一个独有的类名，比如我写的这个组件的类名index-wrap。
当然，如果确定整个项目的这个组件都要改，我们也可以直接写到公共样式文件里。
现在修改如下：
<style scoped>
/* 其它样式 */
</style>
<style>
.index-wrap .el-button--primary {
background: pink;
border-color: pink;
height: 30px;
}
</style>
现在可以看到我们的自定义样式已经添加上去了，其它的第三方组件修改方法也是一样的~ 可以根据自己的需求修改。
image.png
