关于在项目中与element组件样式更改的问题

在项目中用使用的是vue加element组件库，初次使用感觉很爽啊，样式组件什么的一应俱全，可是写到一半的时候会发现el的组件样式更改不了，于是乎废了九牛二虎之力找到他的class类名，然后兴冲冲的修改了样式，你以为到这里就结束了嘛？不，当你打开页面的时候你会发现，你只是在一个组件里修改了样式，但是所有页面的组件样式都更改了！！！刚堵住了一个窟窿，然后又蹦出来一个窟窿，这就有了今天谈到的样式更改问题！

首先先了解一下scoped，scoped是vue中style标签的一个属性，是用来做组件样式隔离的，其原理呢是使用了postcss转译实现，当你给style加上scoped时，在页面上你会发现你的html元素的class类名都加上了类似于data-v-bb33ed30这种字眼，这个就是scoped做的，让你的class类名都拥有了一个唯一标识来做到组件之间的样式隔离。

那么既然已经有了scoped，为什么更改element组件的样式却隔离不了，还是会影响到全局呢？其实还是因为scoped进行转译时将元素选择器放在了最后，组件样式是并没有更改的。所以想解决局部修改组件样式的方法我了解到的有三种。

第一种是将scoped去掉，然后给每一个元素都加上class类名，写样式的时候也需要加上父级类名做到具体选择，然后去写样式就会既做到组件样式隔离又可以修改第三方组件的样式。

第二种方法是单独再去写一个style标签，然后去将要修改组件样式的父系元素的class写上，再写上样式就可以修改了。

第三种方法就是使用样式穿透 >>> ，父级元素class类名 >>> 组件类名  然后修改样式就可以。

个人推荐使用第三种方法！