当前位置:   article > 正文

修改el-dialog标题及内容样式_修改el-dialog的header样式

修改el-dialog的header样式

需求:当前el-dialog标题无内容,但是header仍然存在(头部显示占据一部分空白),同时需要去除内容部分的padding。

已尝试的无效方法:

  1. 通过样式穿透修改.el-dialog__header.el-dialog__body
  2. 给el-dialog加上custom-classclass,再对内部元素进行修改

有效方法:

在el-dialog外部嵌套一层div元素,并对其设置类名,在该元素下对需要修改的.el-dialog__header.el-dialog__body使用样式穿透(注:此处不使用样式穿透不生效)。

  1. .dialog-wrapper {
  2. :deep(.el-dialog__header) {
  3. padding: 0;
  4. button {
  5. z-index: 999;
  6. margin-right: 20px;
  7. }
  8. }
  9. :deep(.el-dialog__body) {
  10. padding: 0;
  11. }
  12. }

此处还需注意去除header会导致关闭对话框的按钮无法显示,可以使用z-index进行修改。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/120793
推荐阅读