文章目录

问题

  • 修改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标签中，不然会造成污染