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;
}
相关推荐
tryCbest21 分钟前
Vue3——第 6 篇:事件处理与表单绑定——v-on 与 v-model
前端·javascript·vue.js
恋猫de小郭25 分钟前
Flutter 的文字为什么比 SwiftUI 更细?问题主要在 Skia 的 256 项查找表里
android·前端·flutter
lexiangqicheng27 分钟前
前端高阶面试核心通关指南:深入解析Vue3与React18底层原理及性能优化
前端·面试·性能优化
怕浪猫27 分钟前
前端对接聊天 API:我用 React 做了一个比 ChatGPT 还好看的界面
前端·后端·面试
程序员小孔.31 分钟前
基于 Spring Cloud + Vue 的 JEEWMS 开源仓储管理平台设计与实现
前端·javascript·vue.js·spring boot·spring cloud·开源
IT_陈寒33 分钟前
深入理解Python:核心原理与最佳实践
前端·人工智能·后端
我喜欢就喜欢44 分钟前
Chrome 插件开发实战指南
前端·chrome
夕阳_醉了1 小时前
花了一天的时间,地板式扫盲了vue3所有API盲点
前端·javascript·vue.js
LinDaiuuj1 小时前
Figma Specs 高效交付与开发协作指南
前端·figma
专业程序开发源1 小时前
django视听资源推荐系统16690-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·php·课程设计