2

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

Bilal Hussain
  • 572
  • 6
  • 14

2 Answers2

1

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

Sreyas Sunil
  • 11
  • 2
0

You should add overflow property.

.Modal {
  ...
    overflow: hidden;
  ...
}
khlan
  • 74
  • 11