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;}