How to set BorderRadius property on material UI Modal

Viewed 1018

that should round my Material UI Modal:

const useStyles = makeStyles((theme) => ({
  loginModal: {
    position: 'absolute',
    margin: 'auto',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0',
    width: '40%',
    height: '70%',
    overflowY: 'none',
    outline: 'none',
    borderRadius: 25
}));

// ...omited

return (
<Modal
  className={classes.modalClassContainer}
  open={open}
  onClose={close}
  closeAfterTransition
  BackdropComponent={Backdrop}
  BackdropProps={{
    timeout: 600,
  }}>
    <Fade in={open}>
      <div className={classes.loginModal}>
        {childBody}
      </div>
    </Fade>
 </Modal>
)

On this case everything seems working normal but the border, it is displayed still nor rounded. How could I add the round borders?

1 Answers

borderRadius should be a string with a length unit. Try borderRadius: '25px'.

Edit: Don't trust me. As NearHuscarl pointed out, by default 25 will be converted to '25px'. OP's Problem was, that he added the style to the wrong element.

Related