如何将 Material UI Dialog 相对于其父级居中答案

【问题标题】：How to center Material UI Dialog relative to its parent如何将 Material UI Dialog 相对于其父级居中
【发布时间】：2021-08-09 09:39:13
【问题描述】：

我想根据父级的位置定位 Material UI Dialog。在这种情况下，我想将它放在第二个网格项上。

 //parent element
 <Grid container>
    <Grid item xs={5} style={{ border: "1px solid black" }}>
      Yerah{" "}
    </Grid>
    <Grid
      item
      xs={7}
      style={{ border: "1px solid black", height: "100vh" }}
    >
      <div style={{ position: "relative" }}>
        //on center of this div i want to position the Dialog
        <SimpleDialog
          selectedValue={selectedValue}
          open={open}
          onClose={handleClose}
        />

        <br />
        <Button
          variant="outlined"
          color="primary"
          onClick={handleClickOpen}
        >
          Open simple dialog
        </Button>
      </div>
    </Grid>

//Dialog component 

const useStyles = makeStyles({
  root: {
    position: "absolute",
    left: "50%",
    top: "50%",
    transform: "translate(-50%, -50%)"
  },
});

 <Dialog
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      open={open}
      classes={{
        paper: classes.root
      }}
    >
      <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
      <div style={{ padding: 20 }}> Content will go here </div>
    </Dialog>

这是我迄今为止尝试过的沙箱，但仍然没有根据父 div 的位置设置位置

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Modal API 中有一个名为 container 的道具，它接受 HTML 元素。

你可以这样做：

<Dialog
   container={() => document.getElementById('parent-div')}>
</Dialog>

【讨论】：