如何为antd Modal组件设置全圆角且避免底部内容被裁切？

你直接给Modal根节点添加style属性设置圆角和overflow: auto不生效且内容裁切，原因有两个：

1. Ant Design Modal的实际承载背景的容器是内部的.ant-modal-content节点，你给外层根节点加圆角不会作用到带背景的内容容器上，默认内部的头部、底部自带背景色会遮挡上下圆角，所以只有顶部圆角能显示出来。
2. 外层根节点设置overflow: auto后，和内部内容容器的高度计算逻辑冲突，导致底部内容被裁切。

方案1：通过CSS类名覆盖（兼容性最好，适配v4/v5版本） #

在你的样式文件中添加如下代码，如果用CSS模块记得加作用域限制避免全局污染：

/* 给内容容器加圆角和溢出隐藏，让内部元素都跟随圆角裁切 */
.ant-modal-content {
  border-radius: 20px !important;
  overflow: hidden;
}

/* 内容过长需要滚动的话，单独给内容区设置滚动，不要加在外层 */
.ant-modal-body {
  max-height: 600px; /* 根据你的需求调整最大高度 */
  overflow-y: auto;
}

方案2：通过Modal内置Props配置（无需修改全局样式） #

适配antd v4版本 #

用modalRender属性包裹内容容器自定义样式：

<Modal
  title=""
  visible={isModalVisible}
  onOk={handleOk}
  onCancel={handleCancel}
  cancelButtonProps={{ style: { display: "none" } }}
  modalRender={(modal) => (
    <div style={{ borderRadius: "20px", overflow: "hidden" }}>
      {modal}
    </div>
  )}
  bodyStyle={{ 
    maxHeight: "600px",
    overflowY: "auto" 
  }}
>
  <img src="./test.svg" alt="" style={{ marginLeft: "8.5rem" }} />
  <p>It has been added!</p>
</Modal>

适配antd v5版本 #

直接用嵌套style属性配置内容容器样式：

<Modal
  title=""
  visible={isModalVisible}
  onOk={handleOk}
  onCancel={handleCancel}
  cancelButtonProps={{ style: { display: "none" } }}
  style={{
    content: {
      borderRadius: "20px",
      overflow: "hidden"
    }
  }}
  bodyStyle={{ 
    maxHeight: "600px",
    overflowY: "auto" 
  }}
>
  <img src="./test.svg" alt="" style={{ marginLeft: "8.5rem" }} />
  <p>It has been added!</p>
</Modal>

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