el-dialog__body去掉padding的问题？

Question

这个 .el-dialog__body

在结构上 给了 :class{padding: 0}

css样式：

  :deep(.el-dialog__body){padding: 0}

  /deep/.el-dialor__body { padding: 0 ; }

都不生效，大佬们，还有别的方式吗

Answer 1

https://github.com/element-plus/element-plus/discussions/6639#discussioncomment-2370649

.your-class-name {
  --el-dialog-padding-primary: -10px;
}

<el-dialog custom-class="your-class-name" />

Answer 2

其实你给 .el-diolog 增加一个 className 然后再给他写样式就好了，比如说：

<el-dialog class="my-cust-class">
...

.my-cust-class {
   ::v-deep {
     .el-dialog__body {
       padding-top: 0;
     }
   }
}

这样来给他覆写（Vue2的穿透写法）。

---

如果说你是想全局都不要这个 padding 了，那么可以去外部比如说 main.js 去引入覆写的样式。
这样的CSS就不需要加上穿透了，直接这样写就行了

.el-dialog .el-dialog__body {
  padding-top: 0;
}

或者说在给 --el-dialog-padding-primary这个CSS变量修改一下初始值。。
改写一下样式主题也是可以的，就是看你具体需要和怎么方便了。

相关阅读
element/var.scss at dev · ElemeFE/element
element/dialog.scss at dev · ElemeFE/element
自定义主题 | Element

Answer 3

这个理论上是会生效的

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 0;
}
</style>

你用的是 sass 么