如何在 Antd 的 Modal 中更改样式？

Question

In a React project, I'am using Ant Design (Antd) as CSS framework. So we have a requirement to change the styling of Modal which is the component of Antd. To change its border radius of Modal component is expected, but, with many attempts, all in vain. Is there any appropriate solution?

1. Modal Component

<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>

index.css

.modalStyle {
  border-radius: 20px;
}

.newStyle {
  border-radius: 20px;
}

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

Following is the codesandbox link: https://codesandbox.io/s/basic-antd4168-forked-rz764

Answer 1

Add:

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

or

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

Answer 2

Check codesandbox https://codesandbox.io/s/basic-antd4168-forked-0nddw

className prop on Modal component applies to the root element however for styling border radius you should you apply it to nested .ant-modal-content and .ant-modal-header elements:

Answer 3

The modal will not come under the direct CSS. You have to write the things in a global CSS file then it will work . Write below in global CSS, it will work

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