①基本结构
<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。文章来源：https://www.toymoban.com/news/detail-723616.html
最后：有哪里写的不对的，帮我及时指正，谢谢。文章来源地址https://www.toymoban.com/news/detail-723616.html
到了这里，关于【element ui】 el-popover 样式修改不生效解决方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
