如何使对话框出现在 Snackbar 上？答案

【问题标题】：How to make dialog appear over Snackbar?如何使对话框出现在 Snackbar 上？
【发布时间】：2020-12-18 00:17:42
【问题描述】：

从沙盒中可以看出，我将 Notistack 用于小吃店。我也想使用 MUI 对话框，但 Snackbars 出现在对话框上方，这是我不想要的。有没有办法让对话框出现在快餐栏上，而不关闭它们？

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

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

【问题讨论】：

【解决方案1】：

只需减小 notistack 的 z-index，例如：

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

并为SnackbarProvider提供适当的道具

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

【讨论】：