从React Material Modal中移除边框

Question

我正在尝试使用React Material Modal，但当它被聚焦时，我总是在modal周围得到一个黑色的边框。我已经删除了它的边框，当它不在焦点上时，但如果模态被聚焦，边框又回来了。有什么建议可以消除它？

https:/codesandbox.iosmaterial-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>
  );
}

Answer 1

设置 outline: 'none' 到你的纸上代替。这将解决你的问题。

另外，我觉得你应该用 <Dialog> 而不是像中建议的那样 文件. 你会保持你的行为，没有这个重点。