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

大嘴史努比2024-01-13 22:53

改造之前效果

改造之后效果

代码：

复制代码

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