【element ui】 el-popover 样式修改不生效解决方法

①基本结构

<el-popover
popper-class="my-popover-style"
trigger="hover">
    <!-- 气泡卡片里面的内容 -->
    <div>
        <div class="iconfont icon-gerenzhongxin" @click="toPersonalCenter">个人中心</div>
        <div class="iconfont icon-h" @click="quit">退出登录</div>
    </div>
    <!--reference 触发 Popover 显示的 HTML 元素 -->
    <el-avatar slot="reference" :src="require('@/assets/avatar.jpg')"></el-avatar>
</el-popover>

②问题

在修改el-popover的样式的时候，和往常修改elmentui样式一样就是不起效果。使用::v-deep或者是/deep/样式穿透都没有效果。

③原因

看了一篇博主的博客才得知，原因是 el-popover生成的div不在当前组件之内，甚至不在App.vue组件的div内，他和App.vue组件的div平级。所以需要全局设置style。

④解决办法

官网中提供了一种修改气泡卡片的样式的方式。我们先使用这个方式定义一个类名。然后再用这个使用这个类名去写样式发现气泡卡片样式并没有生效了一些。在百度上查阅了很多人写的解决办法得知要这样使用。写成.el-popover.my-popover-style，后面是我定义的popper-class类名。

<style lang="less">
.el-popover.my-popover-style{
    ……
}
<style>

注意：当前vue 文件中，可以重新定义一个style , 这个style 不能有 scoped 标记。我们都知道scoped主要是用来解决组件间的样式污染的，而现在el-popover组件是在全局中的所以不能加scoped。

最后：有哪里写的不对的，帮我及时指正，谢谢。