修改elementUI样式

修改elementUI组件样式

• 可以通过/deep/操作符( >>> 的别名)
• 可以不用去除scoped，穿透scoped。
• 如果没有效果，可以在第三方组件外层的div加个类名，然后这样写.外层类名 >>> 第三方组件
• 如果出现 SassError: expected selector 报错，可以使用::v-deep

例如

<style lang="scss" scoped>
>>> .第三方组件 {
    样式
}

/deep/ .第三方组件 {
    样式
}

::v-deep .第三方组件 {
    样式
}

.外层类名 >>> .第三方组件 {
    样式
}
</style>

当这些没有效果时，很多el组件都可通过插槽方式传入要显示的内容，然后在插槽通过style修改样式，就不必去除当前页面的scoped

image.png

• 例子，比如要修改 Popover 弹出框 的字体颜色

<el-popover placement="bottom" width="auto" trigger="hover">
    <!-- **提示内容，即是我们要修改样式的地方** -->
    <!-- **通过slot="default" 传入提示内容content** -->
    <div class="popover-style" slot="default" style="color: #b9b9b9;">
        {{item.keyword}}
    </div>
    <!-- 触发的内容 -->
    <div class="nr weight-400 big-desc" slot="reference">
        {{item.keyword}}
    </div>
</el-popover>