從 MUI 模態中刪除邊框

Question

我正在嘗試使用 React MUI Modal ，但是當它被關注時，我總是在模態周圍得到一個黑色邊框。 當它失去焦點時，我已經刪除了邊框，但是如果模態框被聚焦，則邊框又回來了。 關於如何刪除它的任何建議？

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>
  );
}

Answer 1

改為在您的論文中設置outline: 'none' 。 這將解決您的問題。

另外，我認為您應該按照docs中的建議使用<Dialog> 。 沒有那個焦點，你會保持你的行為。

Answer 2

將 Modal 標記的主體包裹在 a 中並提供 outline: none 作為樣式

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

Answer 3

將此添加到您的 makeStyles

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

Answer 4

Modal是創建Dialog的低級組件，在大多數情況下應該首選它。 默認情況下， Modal容器本身沒有邊框，如果您從此處復制第一個示例中的代碼，您可能需要刪除border和boxShadow屬性，如果您不想要它：

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,
};

現場演示