CODEWITHSUNDEEP
javascriptcssreactjsreact-modal
Bilal Hussain
Bilal Hussain

Reputation: 572

How To Set React Modal border radius

How do i change the border radius of react-modal, i have given className Modal to the component and have defined the styles for the class but that does not seem to have any effect on the modal

<Modal
            className='Modal'
            isOpen={!!this.props.selectedProject}
            contnetLabel='Selected Option'
            onRequestClose={this.props.clearProjects}
            ariaHideApp={false}
            closeTimeoutMS={1000}
        >
</Modal>

SASS :

.Modal {
font-family: Raleway;
background-color: #242222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90vh;
width: 50vw;
margin-right: -50%;
color: white;
border-radius: 400px;

h3 {
 color: white;
}
}

Website link Modal is in my projects section

Upvotes: 2

Views: 7446

Answers (4)

Dineth Siriwardana
Dineth Siriwardana

Reputation: 85

Add this

 <ModalContent p={10} borderRadius="50px">

Upvotes: 0

AnonymousBlank
AnonymousBlank

Reputation: 51

Here's how I added a border radius to my Modal with Mantine in my React app. Its prop is called "radius"

<Modal opened={opened} onClose={close} radius='40px'>

Upvotes: 0

Sreyas Sunil
Sreyas Sunil

Reputation: 11

There's a prop called contentClassName add this className with a unique name and in the style sheet, use that name independently as a selector and give the property border-radius : desired px;

here the contentClassName provides the className to modal-content, which covers your whole ModalHeader, body and Footer

for eg.

<Modal contentClassName="custom-modal"></Modal>

style.scss

.custom-modal { border-radius: 10px !important; }

Upvotes: 1

khlan
khlan

Reputation: 84

You should add overflow property.

.Modal {
  ...
    overflow: hidden;
  ...
}

Upvotes: 1

Related Questions