Element ui | popover弹出框改变背景色和小三角形颜色

初始状态：

最终效果：

如果是vue项目，不能在xxx.vue文件中更改css，而是在被main.js引入的scss或css文件中更改：

// 改变pop框颜色
.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
.el-popper[x-placement^=top] .popper__arrow::after {
  border-top-color: #000022;
}
.el-popper[x-placement^=top] .popper__arrow {
  border-top-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: #000022;
}

注意：在实际项目中，记得给el-popover添加新类名，css使用交际选择器，以免作用在其他元素上：

<el-popover
    placement="top"
    width="400"
    trigger="hover"
    popper-class="popover" <!--添加类名-->
/>

// 使用css交集选择器
.popover.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
//其他略