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;
}
相关推荐
禁默26 分钟前
【学术投稿-2025年计算机视觉研究进展与应用国际学术会议 (ACVRA 2025)】CSS样式解析:行内、内部与外部样式的区别与优先级分析
前端·css
姚永强36 分钟前
web前端第三次作业
前端·javascript·css
编程星空40 分钟前
diff算法简析
前端·javascript·html
工业互联网专业40 分钟前
基于springboot+vue的游戏创意工坊与推广平台的设计与实现
java·vue.js·spring boot·毕业设计·源码·课程设计·游戏创意工坊与推广平台
邢行行44 分钟前
全面解析 CSS 常见简写语法及其使用规则
前端
田本初44 分钟前
【React】如何画一个箭头
前端·react.js·前端框架
落榜美术生1 小时前
vite中的依赖预构建 到底是什么 做了什么
前端
小王不会写code1 小时前
vue-cli-service权限不足(Linux运行vue)
vue.js
优雅永不过时·1 小时前
原生Three.js 和 Cesium.js 案例 。 智慧城市 数字孪生常用功能列表
前端·javascript·低代码·编辑器·智慧城市·webgl·three.js
Gazer_S1 小时前
【CodePen实战:撤销重做功能全记录】
前端·javascript·vue.js