element-ui 如何修改el-popconfirm的样式

改造之前效果

改造之后效果

代码:

复制代码
<style lang="scss">
.my-popconfirm {
  width: 92% !important;
  height: 130px !important;
  padding: 14px !important;
  font-size: 28px !important;
  .el-popper {
    font-size: 28px !important;
  }
  .el-popconfirm__main {
    margin: 0 0 13px;
    font-size: 28px !important;
  }
  .el-button--mini {
    height: 70px !important;
    width: 100px !important;
    padding: 0 6px;
    font-size: 28px !important;
  }
  .el-popconfirm__action{
    display: flex !important;
    height: 50px !important;
    justify-content: space-around !important;
    .span{
        margin-right: 30px !important;
    }
  }
}
</style>

总结:可以F12打开元素查看每一个el元素,这里会显示其自己的样式名称,如:

找到自己想要修改的样式,再进行更具体的修改,例如下面可以看到这个弹窗的最外层的样式名为my-popconfirm,然后接着在这个名称下找到更细节的模块样式名称修改。

相关推荐
全宝23 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔28 分钟前
STM32低功耗模式全面指南
css·stm32·css3
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲3 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想3 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript