How to change styles in Modal of Antd?

user_7474903 0
Viewed 9977

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

reactjs css
3 Answers

Add:

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

or

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

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;
}
user_83286360
Related