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