修改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>