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 標簽內部，但卻不可以直接嵌套使用。這一部分內容，參考這篇文章
參考文章：
https://blog.csdn.net/bamboozjy/article/details/81629381
https://blog.csdn.net/zeping891103/article/details/84961225
https://blog.csdn.net/weixin_42204698/article/details/101757080