css - 如何在 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;
}

以下是代码框链接：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;
}

Answer 2

检查代码框https://codesandbox.io/s/basic-antd4168-forked-0nddw

Modal 组件上的 className 属性适用于根元素，但是对于样式边框半径，您应该将其应用于嵌套元素.ant-modal-content和.ant-modal-header元素：

Answer 3

模态将不属于直接 CSS。你必须在一个全局 CSS 文件中编写这些东西，然后它才能工作。用全局CSS写在下面，它会起作用

.modalStyle .ant-modal-content{
   background-color: #01579b;
}