Reactjs 如何使对话框显示在Snackbar上？

代码沙盒：

从沙盒中可以看出，我使用Notistack作为snackbar。我还想使用MUI对话框，但是snackbar出现在对话框上方，这是我不想要的。有没有一种方法可以使对话框显示在snackbar上而不关闭它们

  <div>
    <SnackbarProvider maxSnack={3}>
      <MessageButtons />
    </SnackbarProvider>
    <SimpleDialogDemo />
  </div>

---

是我在演示中制作的唯一组件，足以看到问题。

只需降低notistack的z索引，例如：

const useStyles = makeStyles((theme) => ({
     snackbar: {
        zIndex: 10,
     }
}));

并为SnackbarProvider提供适当的道具

 <SnackbarProvider classes={{containerRoot: classes.snackbar}}>
   ...
 </SnackbarProvider>

...

只需降低notistack的z指数，例如：

const useStyles = makeStyles((theme) => ({
     snackbar: {
        zIndex: 10,
     }
}));

并为SnackbarProvider提供适当的道具

 <SnackbarProvider classes={{containerRoot: classes.snackbar}}>
   ...
 </SnackbarProvider>

...