CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
bla
bla

Reputation: 1055

How i can remove the blue border in Material React Modal?

I'm using this React Material Modal. In the demo examples you can see that when you open the modal, has a blue border.

There's a way to remove it?

I see in the Modal Api that haves the property disableAutoFocus but i'm setting "true" and my modal still have this blue border:

<Modal
        disableAutoFocus="true"
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >

How i can remove this?

Upvotes: 3

Views: 1750

Answers (2)

fifaltra
fifaltra

Reputation: 375

The only thing that worked for me was to add outline: none to the Box I had inside the modal, not the modal itself

const useStyles = makeStyles((theme) => ({
  popup: {
    outline: 'none',
  },
}));

<Modal open={open} onClose={handleClose}>
  <Box className={classes.popup}>
       ...
  </Box>
</Modal>

Upvotes: 0

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Add a class to modal, say egClass and set:

.egClass:focus {
    outline: none !important;
}

Upvotes: 5

Related Questions