修改elementui的el-popover的样式不成功的原因！！！

最新推荐文章于 2025-04-18 10:34:50 发布

爱喝冬瓜汤的外星人

最新推荐文章于 2025-04-18 10:34:50 发布

阅读量4.4k

点赞数 10

分类专栏： vue-elementui

本文链接：https://blog.youkuaiyun.com/qq_41893334/article/details/115398529

版权

Vue el-popover 样式覆盖 scoped CSS

关键词由优快云通过智能技术生成

vue-elementui 专栏收录该内容

10 篇文章

订阅专栏

在Vue项目中，遇到el-popover组件样式修改无效的问题。尝试了添加scoped和不添加的方式，最终发现需要使用.el-popover.my-popover作为选择器才生效。详细步骤包括在popper-class属性中添加自定义类，然后在样式中用.el-popover结合自定义类进行样式覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中使用了el-popover，但是想修改一下样式，一直不成功，先来看一下官方文档怎么说的
在这里插入图片描述
添加一个类名，string类型，ok，添加一个

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="my-popover"
    >

去设置样式

<style lang="scss" scoped>
	.my-popover{
		padding:20px;
	}
</style>

在这里插入图片描述
结果就是没有设置成功！
是不是因为scoped，不加scoped再试一下！

<style>
my-popover{
    padding:10px 30px;
}
</style>

在这里插入图片描述
还是没有效果！！！
经过疯狂试验以及网上搜索！
最终写法是这样,.el-popover.my-popover 这种格式，前缀是.el-popover ，不然不生效。且不能加上scoped

<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

在这里插入图片描述
修改成功！