Antd的Modal中如何更改样式？

Question

在 React 项目中，我使用 Ant Design (Antd) 作为 CSS 框架。所以我们需要改变 Antd 组件 Modal 的样式。改变 Modal 组件的边框半径是意料之中的，但是，经过多次尝试，一切都是徒劳。有没有合适的解决办法呢？

1. 模态组件

<Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        className="modalStyle"
        //bodyStyle={{ borderRadius: "20px" }} {/* Also tried with bodyStyle property */}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
</Modal>

索引.css

.modalStyle {
  border-radius: 20px;
}

.newStyle {
  border-radius: 20px;
}

/* applied style to its root properties, but no change */
.ant-modal-content {
  border-radius: 20px;
}

以下是codesandbox链接：https://codesandbox.io/s/basic-antd4168-forked-rz764

Answer 1

添加：

.modalStyle2 .ant-modal-header {
  border-radius: 20px 20px 0 0;
}

或者

.modalStyle .ant-modal-header {
  border-radius: 20px 20px 0 0;
}