在React Material-UI中使用全屏对话框时不显示内容

Question

遵循material-ui（https://material-ui.com/components/dialogs/）的文档之后， 我看到对话框可以全屏显示。但是，当我将其与AppBar和ToolBar一起使用时，DialogContent不会显示。

下面是我的对话框的代码。

<Button variant="outlined" color="primary" onClick={handleClickOpen}>
    Open full-screen dialog
</Button>
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>

    <AppBar style={{ backgroundColor: "#182026" }} className={classes.appBar}>
        <Toolbar>
            <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                <CloseIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
                Sound
            </Typography>
        </Toolbar>

    </AppBar>

<DialogContent>
        <DialogContentText>
            Let Google help apps determine location. This means sending anonymous location data to
            Google, even when no apps are running.
        </DialogContentText>
    </DialogContent>
</Dialog>

这只是给我

检查时，我发现内容隐藏在标题中，这很奇怪。

由于此代码主要来自演示，因此我不确定如何修复它。预先感谢。

Answer 1

您需要添加相对于应用栏类的位置。

const useStyles = makeStyles((theme) => ({
appBar: {
    position: 'relative',
},
title: {
    marginLeft: theme.spacing(2),
    flex: 1,
},

}））;

并在实际出现时套用

<AppBar className={classes.appBar} />