修改ElementUI 樣式的幾種方式

1. 新建全局樣式表

   新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 靜態(tài)資源文件夾下的 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 標簽中。

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

第一種全局引入css文件的方式，適合于對elementUI整體的修改，比如整體配色的修改；

第二種添加一個style標簽的形式，也能夠?qū)崿F(xiàn)修改默認樣式的效果，但實際上因為是修改了全局的樣式，因此 在不同的vue組件中修改同一個樣式有可能會有沖突。

第三種方式通過 /deep/ 的方式可以很方便的在vue組件中修改默認樣式，也不會于其他頁面有沖突。

總結(jié)

以上是生活随笔為你收集整理的ElementUI默认样式修改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。