element ui 修改樣式的幾種方式

 

1./deep/修改樣式  scoped樣式

<style lang="less" scoped>
  /deep/.el-button--primary{
    background: #98673c;
    border: none;
  }

</style>

2.組件中 style 不加scoped屬性，直接改 就會生效

<style lang="less" >
  .el-button--primary{
    background: #98673c;
    border: none;
  }

</style>

3.單獨寫css文件，在 main.js中引入

 

 4.內聯樣式

      <el-button type="primary" class="login_btn" @click="submitForm('ruleForm')" style=' background: #98674c;'>登錄</el-button>

　　總結：

1./deep/使用 單獨組件使用，特有樣式，且不會影響其他樣式，在團隊開發中，自己模塊開發的首選

2.直接修改 style沒有scoped ，有效果，但是會影響其他頁面，不適合團隊開發中使用

3.引入全局樣式，適合改變整體風格的樣式

4.內聯樣式，更適合修改舊項目/他人項目，因為無法快速掌握整體樣式，對於很少范圍內的樣式修改，可以使用內聯修改