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,然后接着在这个名称下找到更细节的模块样式名称修改。

相关推荐
涔溪8 分钟前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
你这个年龄怎么睡得着的10 分钟前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
白玉cfc14 分钟前
【iOS】网易云仿写
ui·ios·objective-c
Dream耀24 分钟前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce2 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L2 小时前
Vue 电影导航组件
前端·javascript·vue.js
代码的余温3 小时前
CSS3文本阴影特效全攻略
前端·css·css3
xptwop4 小时前
05-ES6
前端·javascript·es6
每天开心4 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
Heo4 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端