修改ElementUI樣式的幾種方式

ElementUI是一款很是強大的前端UI組件庫，它默認定義了不少美觀的樣式，可是咱們在實際開發過程當中不可避免地遇到須要修改ElementUI默認樣式。下面總結了幾種修改默認樣式的方法。

1. 新建全局樣式表

新建 global.css 文件，並在 main.js 中引入。 global.css 文件通常都放在 src->assets 靜態資源文件夾下的 style 文件夾下，在 main.js 的引用寫法以下：

import "./assets/style/global.css";

在 global.css 文件中寫的樣式，不管在哪個 vue 單頁面都會覆蓋 ElementUI 默認的樣式。

2. 在當前 vue 單頁面中添加一個新的style標籤

在當前的vue單頁面的style標籤後，添加一對新的style標籤，新的style標籤中不要添加scoped屬性。在有寫scoped的style標籤中書寫的樣式不會覆蓋 ElementUI 默認的樣式。

3. 使用 /deep/ 深度修改標籤樣式

找到須要修改的 ElementUI 標籤的類名，而後在類名前加上 /deep/ ，能夠強制修改默認樣式。這種方式能夠直接用到有 scoped 屬性的 style 標籤中。

// 修改級聯選擇框的默認寬度
/deep/ .el-cascader {
  width: 100%;
}

4. 經過內聯樣式 或者 綁定類樣式覆蓋默認樣式

經過內聯樣式 style ，綁定類樣式的方式，能夠在某些標籤中能夠直接覆蓋默認樣式，不是很通用。具體實例以下：
內聯樣式style的方式：

<el-button :style="selfstyle">默認按鈕</el-button>
<script>
    export default {
      data() {
        return {
            selfstyle: {
                color: "white",
		marginTop: "10px",
		width: "100px",
		backgroundColor: "cadetblue"
            }
        };
      }
    }
</script>

經過綁定修改樣式方式修改：

<el-button :class="[selfbutton]">默認按鈕</el-button>
<script>
  export default {
    data() {
      return {
        selfbutton: "self-button"
      };
    } 
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.self-button {
    color: white;
    margin-top: 10px;
    width: 100px;
    background-Color: cadetblue;
}
</style>

5.總結

第一種全局引入css文件的方式，適合於對elementUI總體的修改，好比總體配色的修改；
第二種添加一個style標籤的形式，也可以實現修改默認樣式的效果，但實際上由於是修改了全局的樣式，所以在不一樣的vue組件中修改同一個樣式有可能會有衝突。
第三種方式經過 /deep/ 的方式能夠很方便的在vue組件中修改默認樣式，也不會於其餘頁面有衝突。
第四種方式侷限性比較大，能夠使用，但不推薦使用。

---------------------------------分割線-7月20日更新----------------------------------------

elementUI修改樣式介紹內容更新

第三種方法 /deep/ 更新：

今天在作樣式修改的時候，忽然發現谷歌瀏覽器報了一個警告，說 ** /deep/ combinator is no longer supported in CSS dynamic profile.** 保險起見我決定不用 /deep/ 這種方法來修改 elementUI 的樣式了。

一番搜尋得知，能夠使用 >>> 來深度修改樣式。以下面的例子：

<style scoped>
  .a >>> .b { /* ... */ }
</style>

上面的代碼將會被解析成以下格式，可在瀏覽器中查看：

.a[data-v-f3f3eg9] .b { /* ... */ }

可是， 粗心的我一開始沒注意在 <style> </style> 標籤中並無聲明相似於 less，scss等預處理語言，所以：** 這種 >>> 方式只能用在原生 CSS 語法中，不能在 css 預處理器如 less scss 等直接使用**

如何在css預處理器中使用 >>> 深度修改elementUI樣式呢？
用變量代替 >>> 符號，以下代碼示例：

<style scoped lang='less'>
    @deep: ~'>>>';
      .box {
        @{deep} .title {
            ...
        }
      }
</style>
**~ 表示轉義**
轉義容許您將任意字符串用做屬性或變量值。除插值外，裏面的任何東西 ~"anything" 或 ~'anything' 原樣使用。
```css
.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

編譯爲如下內容：

.weird-element {
  content: ^//* some horrible but needed ss hack;
}

固然，咱們也能夠在全局樣式表中爲 >>> 取別名，那麼就能夠直接在頁面任何 style 標籤中使用其別名如 @{data} 來修改頁面樣式了

注意：我在實際中發現，多個 @{data} 能夠同級使用，但不能相互嵌套，不然將不會生效。以下圖，雖然 el-input__inner 在 el-input 標籤內部，但卻不能夠直接嵌套使用。這一部份內容，參考這篇文章

參考文章：
http://www.javashuo.com/article/p-epzzysda-mt.html
https://blog.csdn.net/zeping891103/article/details/84961225
https://blog.csdn.net/weixin_42204698/article/details/101757080