Vue use Elementui fastest way to modify the default!

        I believe we all need to over-use Elementui in Vue in time, he met the most problematic and most eggs pain is to modify the default style, then go straight;

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

The default style

 

method 1

1, find the class name added by default

 

     2, remove the scoped, scoped limiting Vue is independent CSS style assembly to the global overflow is not used!

 

//   style 
.el-progress- bar__inner { 
  background: # 000 ; 
} 
//   both used as appropriate. 
progress--.el bar__inner { 
  background: # 000 ! Important; 
} 
//   Important is css selector attributes, default weights as Wireless!!

        Summary: This method will take effect, but will affect the overall situation;

 

 

Method 2,

Use Vue in depth the scope selector! This symbol oh    >>>

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

Summary: Use Vue depth selector, you can be the perfect solution!

 

        Note: Some like preprocessor like Sass could not be resolved correctly  >>>. In this case you can use  /deep/ or  ::v-deep operator instead - both  >>> alias, can also work.

 

    It attaches to the official website address: https: //vue-loader.vuejs.org/zh/guide/scoped-css.html# mix of local and global style

 

        If you like it, welcome attention to the "front-end pseudo-uncle," I will share the front end of your ongoing learning knowledge!