vue覆蓋組件樣式

用 vue 開發時會用到一些組件庫,例如比較流行的 elementUI ,iView , museUI …
可是在使用中 有時須要修改組件庫自帶的樣式,這時可能會寫在一個公共的css文件,而後在main.css中引入,這確實是可行的 ,但若是樣式不少,那每一個頁面都會加載不少沒必要要的樣式。 何況,一個頁面的css 寫在 不一樣的 css文件裏面 很不利於維護。這裏推薦一個css的屬性 深度選擇器 .css

這裏提供幾種可用方案vue

1.一個公共的css文件,而後在main.css中引入。可是樣式不少,每一個頁面都會加載不少沒必要要的樣式,且不利於維護ui

2.增長important。直接在css文件中,使用原組件類名,增長樣式須要增長【!important】,而且去掉scoped,可是這樣作,就會污染全局組件樣式ci

3.增長獨有類名,好比elementUI, <el-col class='special-style'>...</el-col>. element

4.使用css屬性:deep開發

好比:在一個商城的項目使用了mint-ui的radio組件,此時mint-ui已經有默認的樣式了,我能夠經過提取公共文件的方式來修改,以達到本身想要的,可是同時其餘地方也會受到影響rem

同時只想要修改這個地方的樣式,在其餘頁面用到mint-ui的時候不變那麼就能夠考慮使用 /deep/it

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

考慮到deep屬性的兼容問題class

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

相關文章
相關標籤/搜索