vue覆盖html,VUE 如何覆盖element组件样式

最近在用element UI开发一个toB系统时，发现设计稿和UI库有不小的出入，由于不是内部系统，所以这块的还原度没办法“得过且过”。我整理了一些覆盖UI库样式的“手段”

为什么UI库(这里用的是element UI)的组件不好直接覆盖？

我们通常的vue工程都是用vue-cli自动生成出来的，不知道大家有没有发现一个细节——生成的*.vue文件上会默认带上“scoped”，如下图：

UI库不好覆盖的问题也基本从这里开始了。首先看“scoped”是什么？首先“scoped”并不是vue的专利，(“scoped”属性是HTML5的新特性，如果使用该属性，则样式仅仅应用到style元素的父元素及其子元素。)说人话就是vue用了scoped属性，导致当前*.vue文件里的style仅仅作用于当前组件的元素，而对部分element UI的组件无效(一些简单的组件，例如el-button这种简单替换的还是可以覆盖的)。

“scoped”在工程中是如何工作的？

我们可以用自己的工程运行起来看一下。看看生成的页面是什么样的。

  

可以看到，在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

但是要注意scoped的作用域，因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器。

问题来啦，我们在自己组件上用scoped初