reactjs - 如何让对话框出现在 Snackbar 上？

Question

代码沙箱:https://codesandbox.io/s/elegant-wind-mv842

正如在沙盒中可以看到的，我使用 Notistack 作为零食栏。我还想使用 MUI 对话框，但 Snackbars 出现在对话框上方，这是我不想要的。有没有办法让对话框出现在 snackbar 上，而不关闭它们？

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

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

Answer 1

只需减小notstack的z-index即可，例如:

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

并为SnackbarProvider提供适当的 Prop

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