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