element弹出框popover样式调整踩坑

问题

• 修改popover样式无效

<style lang="less" scoped>
/deep/ .el-popper[x-placement^="right"] {
    background: #ffffffeb;
    border-radius: 5px;
}
/deep/ .el-popper[x-placement^="right"] .popper__arrow::after {
    border-right-color: #fff;
}
/deep/ .el-popper[x-placement^="right"] .popper__arrow {
    border-right-color: #ffffffeb;
}
.el-popover {
    background: #ffffffeb;
    border-radius: 5px;
}
/deep/ .el-popover {
    background: #ffffffeb;
    border-radius: 5px;
}
</style>

原因分析

• F12审查元素可以发现弹出框不在app里面
• 我们在写样式时加上scoped为了不造成全局污染
• 而此样式需要在全局才能更改
  

解决

• 去掉scoped，为popover专门写一段样式代码段
• 这样便能修改popover的样式了

<style lang="less">
.el-popper[x-placement^="right"] {
    background: #ffffffeb;
    border-radius: 5px;
}
.el-popper[x-placement^="right"] .popper__arrow::after {
    border-right-color: #fff;
}
.el-popper[x-placement^="right"] .popper__arrow {
    border-right-color: #ffffffeb;
}
</style>

补充

• 其他样式依然要写在带有scoped的style标签中，不然会造成污染