问题：修改el-popover样式不生效

        在Element UI中使用el-popover组件时，我想要将样式修改成符合自己主题的样式，遇到自定义样式不生效的问题，尝试过很多方法之后，发现修改的样式都没有生效，包括使用官方文档中提供了一个特殊的类名popper-class，或者甚至使用>>> /deep/ 样式穿透都不起作用；

        后面通过查资料和看控制台发现，这是因为el-popover生成的div元素并不位于当前组件的DOM结构内，而是与App.vue的根div同级；并且我使用了scoped；因此解决方法有以下几种：

        解决方法：

                1、去掉scoped，但是不加scoped 会影响其他页面样式，我必须添加scoped，所以我采用第二种

                2、在你的Vue文件中，除了已存在的带有scoped属性的style标签外，再添加一个新的style标签。确保新添加的style标签不包含scoped属性，以便样式能够全局生效。将你需要应用到el-popover的样式规则放在这个新的style标签内

<el-popover placement="right" trigger="click" popper-class="moreSettingDiv">
    <el-popover placement="right" trigger="click" popper-class="popper-div">
    	<i slot="reference" style="cursor: pointer;" class="iconfont" title="符号配置">&#xe759;</i>
    </el-popover>
    <i slot="reference" class="el-icon-s-operation"></i>
</el-popover>

<style scoped lang="scss">
	...
</style>

<style lang="scss">
@import "@/admin/styles/config.scss";

.el-popover.moreSettingDiv {
    width: 50px;
}

//最外层div,修改背景色，边框
.el-popover.moreSettingDiv {
  background-color: $collapse-bg;
}
//修改title颜色
.moreSettingDiv .el-popover__title {
  color: $collapse-text-color;
}
.moreSettingDiv .popper__arrow::after {
  border-right-color: $collapse-bg !important;
}
</style>

        注意：我在写的时候，还遇到一个问题就是使用popper-class的时候不生效

因为我一开始写的是

.moreSettingDiv {
  background-color: $collapse-bg;
}

        但是应该写

.el-popover.moreSettingDiv {
  background-color: $collapse-bg;
}