Remove border from Material UI Modal

Question

I am trying to use the React Material UI Modal but I always get a black border around the modal when it is focused on. I have removed the border when it is out of focus, but if the modal is focused, the border comes back. Any suggestions on how to remove it?

https://codesandbox.io/s/material-demo-kk0ux?file=/demo.js

const useStyles = makeStyles(theme => ({
  paper: {
    position: "absolute",
    width: 400,
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3)
  },
  modal: {
    "&:focus": {
      outline: "none"
    }
  }
}));

export default function SimpleModal() {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const body = (
    <div style={modalStyle} className={classes.paper}>
      <h2 id="simple-modal-title">Text in a modal</h2>
      <p id="simple-modal-description">
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
      </p>
      <SimpleModal />
    </div>
  );

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Modal
        className={classes.modal}
        open={open}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}

Did you used google? [Result 1](https://stackoverflow.com/questions/60675116/how-i-can-remove-the-blue-border-in-material-react-modal) [Result 2](https://github.com/mui-org/material-ui/issues/11504) [Result 3](https://stackoverflow.com/questions/55996690/how-to-remove-focused-highlight-in-react-material-ui-tab-component) ? — 0stone0, Jun 10 '20 at 16:50
Does this answer your question? [How to remove focused highlight in React material-ui Tab Component?](https://stackoverflow.com/questions/55996690/how-to-remove-focused-highlight-in-react-material-ui-tab-component) — 0stone0, Jun 10 '20 at 16:50
Make sure you explicitly need to remove it; this comes up frequently during accessibility reviews. — Dave Newton, Jun 10 '20 at 16:53
@0stone0 yes I have googled and tried those results but nothing seemed to work. setting focus, hover, or active outline to none did not fix it. Adding disableAutoFocus also did not fix it. — Sri, Jun 10 '20 at 17:05

score 31 · Answer 1 · answered Jun 10 '20 at 17:03

31

Set the outline: 'none' to your paper instead. That will fix your problem.

Also, i think that you should be using <Dialog> instead, as recommended in docs. You will keep your behavior without that focus.

answered Jun 10 '20 at 17:03

Diego Segura

896
6
17

Perfect thank you. I needed to apply the styling on paper. Will look into Dialog. Cheers – Sri Jun 10 '20 at 17:07

score 6 · Answer 2 · answered Feb 07 '21 at 17:05

6

Wrap the body of the Modal tag in a and provide outline: none as a style

<div style={{outline:'none'}}>     
    {body}    
    </div>

answered Feb 07 '21 at 17:05

Atul Rai

171
2
4

score 1 · Answer 3 · answered Jan 29 '21 at 07:57

1

add this to your makeStyles

modal:{
    "&:focus":{
    outline: 'none"
   }
 }

answered Jan 29 '21 at 07:57

Jacky Raichand

39
1

score 0 · Answer 4 · answered Nov 08 '21 at 08:49

Modal is a low level component to create a Dialog which should be preferred in most cases instead. The Modal container itself doesn't have a border by default, in case you copy the code from the first example here, you may want to remove the border and boxShadow properties if you don't want it:

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  // comment the 2 lines below
  // border: '2px solid #000',
  // boxShadow: 24,
  p: 4,
};

Remove border from Material UI Modal

4 Answers4

Live Demo