How to make dialog appear over Snackbar?

Question

Codesandbox: https://codesandbox.io/s/elegant-wind-mv842

As can be seen in the sandbox, I am using Notistack for snackbars. I also want to use MUI Dialogs, but the Snackbars appear over the dialogs, which I don't want. Is there a way to make the dialog appear over the snackbars, without closing them?

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

Is the only component that I am producing in the demo, and it is enough to see the issue.

Answer 1

Just decrease z-index of notistack, e.g.:

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

and provide appropriate props for SnackbarProvider

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