CODEWITHSUNDEEP
cssreactjs
Pranav
Pranav

Reputation: 1646

How to change styles in Modal of Antd?

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

Upvotes: 6

Views: 35751

Answers (4)

Yugene
Yugene

Reputation: 3232

You don't need to customize css, you can put html string as title.

    <Modal
      open={open}
      centered
      width={450}
      title={<p className="text-black/[.88] text-[30px] font-bold">Upload company logo</p>}
      onOk={() => setOpen(false)}
      onCancel={() => setOpen(false)}      
    >

Upvotes: 1

Abhishek Satyam
Abhishek Satyam

Reputation: 41

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

Upvotes: 2

ishaba
ishaba

Reputation: 551

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:

className on Modal component

Upvotes: 2

DVN-Anakin
DVN-Anakin

Reputation: 1772

Add:

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

or

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

Upvotes: 4

Related Questions