vue覆盖组件样式

用 vue 开发时会用到一些组件库，例如比较流行的 elementUI ，iView ， museUI …
但是在使用中 有时需要修改组件库自带的样式，这时可能会写在一个公共的css文件，然后在main.css中引入，这确实是可行的 ，但如果样式很多，那每个页面都会加载很多不必要的样式。 况且，一个页面的css 写在 不同的 css文件里面 很不利于维护。这里推荐一个css的属性 深度选择器 .

这里提供几种可用方案

1.一个公共的css文件，然后在main.css中引入。但是样式很多，每个页面都会加载很多不必要的样式，且不利于维护

2.增加important。直接在css文件中，使用原组件类名，增加样式需要增加【!important】,并且去掉scoped，但是这样做，就会污染全局组件样式

3.增加独有类名，比如elementUI, <el-col class='special-style'>...</el-col>. 

4.使用css属性：deep

比如：在一个商城的项目使用了mint-ui的radio组件，此时mint-ui已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响

同时只想要修改这个地方的样式，在其他页面用到mint-ui的时候不变那么就可以考虑使用 /deep/

.mint-radiolist /deep/ .mint-cell-title {
　　margin-top: 0.3rem;
}

考虑到deep属性的兼容问题

.mint-radiolist >>> .mint-cell-title {
　　margin-top: 0.3rem;
}