时间戳

首页 > 解决方案 > 材质 UI 模态不会关闭

javascript - 材质 UI 模态不会关闭

问题描述

const useStyles = makeStyles((theme) => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));


const classes = useStyles();

<Modal
  className={classes.modal}
  open={eval(`${page}_modal`)}
  onClose={() => eval(`set_${page}_modal`)(false)}
  aria-labelledby="simple-modal-title"
  aria-describedby="simple-modal-description"
  closeAfterTransition
  BackdropComponent={Backdrop}
  BackdropProps={{
    timeout: 500,
  }}
>
  <Child />
</Modal>

以上包含我关于我的模态的所有代码。

<Child />单击按钮时，它会像应有的那样在屏幕中间打开。但是在模态之外单击并不会关闭它。按 Escape 不会关闭它。它没有 (X) 关闭按钮。所以底线是，它不能被关闭。

此外，它似乎会导致我的页面重新呈现。

标签： javascriptcssreactjsmaterial-uimodal-dialog

解决方案

推荐阅读