Search code examples
javascriptcssreactjsreact-modal

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

Solution

  • You should add overflow property.

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