Vue使用Elementui修改默認最快方法！

        相信大家都需要過，在Vue中使用Elementui的時候，遇到最多也最蛋疼的問題就是修改默認樣式，接下來直奔主題；

//  template
 <el-progress 
   :text-inside="true" 
   :stroke-width="26" 
   :percentage="70"
 ></el-progress>

默認樣式

 

方法1

1、找默認添加的類名

 

     2、去掉scoped，scoped是Vue是限制獨立組件中的CSS樣式不被溢出到全局使用！

 

//  style
.el-progress-bar__inner{
  background: #000 ;
}
//  這兩種酌情使用。
.el-progress-bar__inner{
  background: #000 !important;
}
//  !important是css選擇器中的屬性，默認權重無線大！

        總結：這種方法會生效，但是會影響到全局；

 

 

方法2，

使用Vue中的深度作用域選擇器！ 這個符號哦   >>>

<style  scoped>
>>> .el-progress-bar__inner{
  background: #000 ;
}
</style>

總結：使用Vue的深度選擇器，就可以完美的解決！

 

        注意：有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

 

    給大家附上官網地址：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#混用本地和全局樣式

 

        如果大家喜歡的話，歡迎關注“前端偽大叔”我將為您不間斷的分享前端學習知識！