Reactjs 在物料界面中使用全屏对话框时未显示内容

在材料ui（）的文档之后， 我看到对话框可以是全屏的。但是，当我将其与

AppBar

和

ToolBar

一起使用时，

对话框内容

不会显示

下面是我的对话框的代码

<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>

打开全屏对话框

当我检查这个时，我可以看到内容隐藏在标题中，这很奇怪

由于这段代码大部分来自演示，我不知道如何修复它。提前感谢。
您需要添加相对于应用程序栏类的位置

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

})))

并在实际应用中出现

<AppBar className={classes.appBar} />


在这里可以正常工作：。请创建一个沙箱，重现您的问题。