天天看點

修改element-ui元件樣式

修改element-ui元件樣式

使用的element-ui某個元件在項目中被多次引用,并且需要根據不同元件自定義樣式,則不可以采用修改全局css方式定義樣式

需要通過自定義的class類名+element-ui類名的方式來定義單個element-ui元件樣式即可實作

如:

  • 使用element-ui手風琴元件 在項目中多次被引用 且需要做不同的樣式适配
  • 首先聲明class類屬性 值如:mycollapse
  • 再通過目前元件的style标簽修改元件樣式,注:style需加作用域限制 (scoped)
  • 這樣被引用的element-ui手風琴元件就隻對本元件内定義的樣式生效了
<template>
 <el-collapse v-model="screeningActive"
              accordion
              class="mycollapse"
              @change="collapseChange">
       <el-collapse-item title="标題"
                         name="标題1">
                         ……
       </el-collapse-item>
 </el-collapse>
</template>
<style scoped>
.mycollapse .el-collapse-item {
  …………
}
.mycollapse .el-collapse-item__header {
  …………
}
</style>