移除Ant Design Modal的footer后出现空白及圆角样式异常问题

问题原因 #

1. 你给Modal传递的style属性作用在Modal最外层浮层容器上，实际承载内容的.ant-modal-content内置了默认白色背景和圆角，会完全覆盖外层容器的样式，所以你在外层设置的borderRadius不生效。
2. Modal内置的.ant-modal-body默认带有底部内边距，即便你把footer设为null移除了底部栏，这块内边距依旧会保留，就是你看到的底部空白区域。

解决方案 #

方式1：使用Modal内置属性直接配置（推荐）

Antd Modal提供了contentStyle和bodyStyle两个属性分别控制内容容器、内容区域的样式，直接修改对应属性即可：

<Modal
  width={480}
  footer={null}
  // 控制内容容器的圆角、背景
  contentStyle={{
    backgroundColor: "#FFFFFF",
    borderRadius: "20px"
  }}
  // 移除内容区域默认的底部内边距，消除空白
  bodyStyle={{
    paddingBottom: 0
    // 如果需要自定义内容区域的内边距，可以在这里统一设置，比如 padding: '24px'
  }}
>
    <p>Done!</p>
    <p>You've added a name</p>
    <Button
      style={{
        borderRadius: "7px",
      }}
    >OK</Button>
</Modal>

方式2：自定义类名覆盖样式

如果需要全局复用该样式，可以给Modal添加自定义类名后写CSS覆盖：

1. 给Modal加类名

<Modal
  className="custom-no-footer-modal"
  width={480}
  footer={null}
>
  {/* 内容 */}
</Modal>

2. 新增CSS样式

.custom-no-footer-modal .ant-modal-content {
  border-radius: 20px;
  background: #fff;
}
.custom-no-footer-modal .ant-modal-body {
  padding-bottom: 0;
}

内容的提问来源于stack exchange，提问作者Sai Krishnadas