修改elementui的el-popover样式实现步骤
更新时间：2026年07月10日 11:15:51 作者：ds_surk
想要自定义ElementUI的el-popover样式却总是失效？问题在于它的DOM默认创建在根组件之外,别担心,本文教你一个简单技巧：通过popover属性添加专属类名,轻松修改背景色等样式,且不影响其他组件,点击查看完整代码示例,彻底解决样式冲突
修改elementui的el-popover的样式
项目中使用了el-popover，但是原始白色背景不够美观，想修改一下样式，一直不成功，仔细查看dom发现，popover的dom创建在了最外层，
如图：
显然，它是和根组件app同级的dom，所以在任何 <style scoped></style>下写的css均不能生效。
如果直接在<style></style>下粗暴修改，势必又会影响到其他组件的样式，显然不能忍受。
那么该怎样修改,又不会影响到其他组件的样式呢？
先来看一下官方文档怎么说的
由此可知，我们可以给popover组件添加一个类名，老铁们！！！既然能添加类名，岂不是可以为所欲为，又不会影响到其他样式了 ：）
组件
样式
<style>
//最外层div,修改背景色，边框
.el-popover.monitor-yt-popover {
background-color: #090d29;
border-color: #146ebd;
}
//修改title颜色
.monitor-yt-popover .el-popover__title {
color: white;
}
//修改下面的小三角，属性名根据组件的placement位置做相应修改
.monitor-yt-popover .popper__arrow::after {
border-top-color: #090d29 !important;
}
</style>效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue自定义数字输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
大家应该都知道父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,所以下面这篇文章主要给大家介绍了关于vue父子组件传值以及单向数据流问题的相关资料,需要的朋友可以参考下2021-09-09
本篇介绍directive的简单实现，主要学习其实现的思路及代码的设计，需要的朋友参考下吧2018-01-01
本篇文章主要介绍了详解Vue2 无限级分类(添加,删除,修改) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下2023-03-03
本篇文章主要介绍了vue-router：嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了Vue 开发音乐播放器之歌手页右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了一个Vue的内存泄露详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
最新评论