Question

我试图触发一个单击按钮时打开的对话框，以使其占据蓝色区域一半的高度，如下图所示，而其余的上半部分将具有背景。目前，我无法强制对话框在特定区域（蓝色区域）中打开，而是占用了全屏显示，并且我不确定如何更改。我已在codesanbox中添加了一个示例代码，以显示为完成此操作而做的事情：https://codesandbox.io/s/material-demo-rryul

这是一张图片，显示我想要实现的目标

export default function CenteredGrid() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

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

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

  return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        <Grid item xs={6}>
          <Paper style={{ height: 500, background: "blue" }}>
            <div>
              <Button
                variant="outlined"
                color="white"
                onClick={handleClickOpen}
              >
                Open full-screen dialog
              </Button>
              <Dialog
                fullScreen
                open={open}
                onClose={handleClose}
                TransitionComponent={Transition}
              >
                <AppBar className={classes.appBar}>
                  <Toolbar>
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleClose}
                      aria-label="close"
                    >
                      <CloseIcon />
                    </IconButton>
                    <Typography variant="h6" className={classes.title}>
                      Sound
                    </Typography>
                    <Button autoFocus color="inherit" onClick={handleClose}>
                      save
                    </Button>
                  </Toolbar>
                </AppBar>
                <List>
                  <ListItem button>
                    <ListItemText
                      primary="Phone ringtone"
                      secondary="Titania"
                    />
                  </ListItem>
                  <Divider />
                  <ListItem button>
                    <ListItemText
                      primary="Default notification ringtone"
                      secondary="Tethys"
                    />
                  </ListItem>
                </List>
              </Dialog>
            </div>
          </Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper style={{ height: 500, background: "purple" }} />
        </Grid>
      </Grid>
    </div>
  );
}

如果不清楚，请告诉我

Answer 1

材质ui Dialog呈现为portal。根据{{3}}，Modal也可以使用Dialog组件的道具。

因此，您可以在Modal中使用Dialog的{{3}}道具，并提供一个target来指示显示门户的位置。

该容器将附加有门户网站子级。默认情况下，它使用顶级文档对象的主体，

doc

对话样式

dialog: {
    background: "orange",
    position: "relative !important",
    height: "100%",
    width: "100%",
    padding: "100px 0px 0px 0px", //change this based on your needs
    backgroundColor: "rgba(0,0,0,0.6)"
  }

对话jsx

...
      const container = React.useRef(null);
...
...
          <Dialog
                container={container.current}//<---here
                fullScreen
                open={open}
                onClose={handleClose}
                TransitionComponent={Transition}
                className={classes.dialog}
              >
...

中途打开对话框抽屉

1 个答案: