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

相关推荐
花海少爷2 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
sinat_3842410928 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan2 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520312 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
前端拾光者3 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
初九之潜龙勿用3 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net