ElementUI el-popover弹框背景色设置

1.el-popover样式由于使用了 absolute 属性,导致脱离了节点,所以在父级元素使用class无法进行权重处理来修改其样式,解决方式如下:通过popper-class实现样式处理,避免全局样式污染

javascript 复制代码
// html
<el-popover
      placement="right"
      popper-class="device-popover"
      width="130"
      trigger="click">
          <div>
               Devices with the same IP address as the user
          </div>
</el-popover>

//css 
.device-popover{
   background-color: #ffdf25 !important;
   border-color: #ffdf25 !important;
}
.device-popover .popper__arrow::after{
   border-right-color:#ffdf25 !important;
}
相关推荐
一点一木19 小时前
🚀 2025 年 11 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
白粥19 小时前
HTML标题标签<h1>到<h6>
前端·html
IT_陈寒19 小时前
React 18新特性实战:这5个Hook组合让我少写50%状态管理代码
前端·人工智能·后端
HashTang19 小时前
【AI 编程实战】第 1 篇:TRAE SOLO 模式 10 倍速开发商业级全栈小程序
前端·后端·ai编程
syt_101319 小时前
grid应用之响应式布局
前端·javascript·css
libolei19 小时前
chrome浏览器安装axure插件
前端·chrome·chrome插件
黑臂麒麟19 小时前
Electron&OpenHarmony 跨平台实战开发(一):electron-vite 与 Vue3 架构搭建指南
前端·javascript·electron·openharmony
少寒19 小时前
深入理解JavaScript Promise:异步编程的基石
前端·javascript
tecwlcvi32319 小时前
安卓版谷歌地图,Google地图高清版,谷歌地球,谷歌翻译,谷歌(Chrome)浏览器,手机版Edge,浏览器等安卓版浏览器下载
前端·chrome·edge
czlczl2002092519 小时前
SpringBoot中web请求路径匹配的两种风格
java·前端·spring boot