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

相关推荐
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json