Ant Design Modal单独设置border-radius的方法求助

方法1：使用自定义className（推荐） #

给目标Modal添加唯一的自定义类名，通过CSS选择器精准修改其内部容器样式，不会影响全局其他Modal：

1. 给Modal组件添加className属性：

<Modal
  className="custom-round-modal"
  title="自定义圆角弹窗"
  visible={visible}
  onCancel={() => setVisible(false)}
>
  {/* 弹窗内容 */}
</Modal>

2. 在CSS文件中编写样式：

.custom-round-modal .ant-modal-content {
  overflow: auto;
  border-radius: 24px;
}

方法2：使用contentStyle属性（Ant Design 4+支持） #

Ant Design 4及以上版本的Modal提供了contentStyle属性，可直接为内部的.ant-modal-content元素设置内联样式，无需额外CSS：

<Modal
  title="自定义圆角弹窗"
  visible={visible}
  onCancel={() => setVisible(false)}
  contentStyle={{ borderRadius: '24px', overflow: 'auto' }}
>
  {/* 弹窗内容 */}
</Modal>

为什么之前的方法无效？ #

• style属性作用于Modal最外层容器（.ant-modal），而圆角需要设置在内部的.ant-modal-content元素上，因此外层加圆角不生效。
• bodyStyle仅控制弹窗主体内容区域（.ant-modal-body）的样式，并非整个弹窗的容器，所以也无法实现全局圆角效果。

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