Vue——解決使用第三方組件庫時沒法修改默認樣式的問題（使用 /deep/ ）

　　最近在開發一個基於Vue的後臺管理系統，其中使用了element-ui第三方ui組件庫。使用過組件庫的人都知道，第三方組件每每會有一些默認的樣式，而有些又是咱們想要改變的。

 

1、基礎（瞭解 <style></style> 的 scoped 屬性）

　　在編寫Vue代碼過程當中，爲了避免讓父組件相一樣選擇器名稱設置的樣式影響到子組件，咱們每每會給 <style></style> 標籤設置 scoped 屬性。可是若是設置了scoped屬性，在該組件內的 Css 就只能做用於當前組件中的元素。

　　實際上，它是經過使用 PostCSS 來實現如下轉換：

<template>
  <div class="example">hi</div>
</template>

<style scoped>
    .example {
        color: red;
    }
</style>

　　轉換爲：

<template>
    <div class="example" data-v-f3f3eg9>hi</div>
</template>

<style>
    .example[data-v-f3f3eg9] {
        color: red;
}
</style>

　　

　　固然，咱們也能夠混合地使用本地樣式和全局樣式：

<style>
    /* 全局樣式 */
</style>

<style scoped>
    /* 本地樣式 */
</style>

　　

　　關於子組件根元素的樣式結果，還須要單獨敘述一下：

　　使用 scoped 後，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是爲了讓父組件能夠從佈局的角度出發，調整其子組件根元素的樣式。

 

2、問題（使用第三方組件庫時修改默認樣式）

　　接下來，就介紹和解決一下，使用第三方組件庫時遇到的問題——沒法修改默認樣式。

　　在項目中使用 element-ui 組件庫，設置樣式時發現根本沒法覆蓋掉默認樣式，開始我也覺得是選擇器的權重問題，後來發現，不管怎麼加類名，樣式都沒法生效。如今提供以下的解決方案：

　　使用深度做用選擇器：若是你但願 scoped 樣式中的一個選擇器可以做用得「更深」，例如影響子組件，你可使用 >>> 操做符：

<style scoped>
    .a >>> .b { 
        /*  須要設置給子組件b的樣式  */ 
        color: red;
    }
</style>

　　上述代碼將會編譯成：

.a[data-v-f3f3eg9] .b { 
    /*  須要設置給子組件b的樣式  */ 
    color: red;
}

　　　　

　　可是，有些像 Sass 之類的預處理器沒法正確解析 >>>。這種狀況下你可使用 /deep/ 或 ::v-deep 操做符取而代之——二者都是 >>> 的別名，一樣能夠正常工做。

<style scoped>
    .a /deep/ .b { 
        /*  須要設置給子組件b的樣式  */ 
        color: red;
    }
</style>

　　

　　若是使用了上面的 /deep/ 後發現樣式依然沒有生效，那麼就給它再來個最高權重（ !important ）：

<style scoped>
    .a /deep/ .b { 
        /*  須要設置給子組件b的樣式  */ 
        color: red !important;
    }
</style>