Snackbar over Dialog with MaterialUI

Question

I am using React with the Material UI library, and have the following component hierarchy:

<RootContainer>
  <SnackBar />
  <HomeContainer>
    <LoginModal />
  </HomeContainer>
</RootContainer>

My issue is that the Snackbar shows up underneath the LoginModal, even when its zIndex is increased to 9999.

What's the correct way to place the Snackbar over the modal (or more precisely, over the backdrop of the Modal?

Answer 1

The best way that I found was using Portal to wrap around the Snackbar component https://material-ui.com/api/portal/.

Just render your snackbar as child of portal that's it:

<Portal>
 <SnackBar/> 
<Portal/>

This way you can get a Snackbar on top of the Dialog's opaque background

Answer 2

Which version of material-ui are you using? I'm unable to reproduce this in the latest v1-beta: https://codesandbox.io/s/084v1z2qn

I've also tried reproducing this with v0.x to no avail.

If you're using v0.x, check your theme. Snackbar uses a value defined in the zIndex attribute (see implementation). From the defaults, you can see that snackbar is higher than modal.

Check the values of theme.zIndex.snackbar and theme.zIndex.modal. Snackbar should be higher. If this isn't the case, you've customized the theme from its default and can simply change your theme.

If the theme looks right, check the styles and classes you've applied to the Dialog, Snackbar, Modal, etc. I mention this because your question mentions an attempt at setting Snackbar's z-index to 999. The theme defaults modal to 1300, so a value of 999, as specified in your question, would be too low. If you've messed with z-index, you're no longer relying on the theme configuration, so your mistake could be there.

Since both release branches of material-ui handle z-index by default and this problem cannot be easily reproduced, I'm pretty sure the problem is in your styling.

Feel free to include a codesandbox with a reproducible case and I'll take another look.

Answer 3

Had the same issue with Snackbar hidden behind backdrop of a drawer. Fixed that by putting Snackbar component after the main view renders in the React DOM. In my App it looks like this:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <MuiThemeProvider theme={theme}>
    <IntlProvider locale={lang} messages={messages[lang]}>
      <React.Fragment>
        {configRoutes()}
          <SnackbarMsg
            open={props.snackbarOpen}
            msg={props.snackbarMsg}
            success={props.snackbarSuccess}
          />
        </React.Fragment>
      </IntlProvider>
    </MuiThemeProvider>
  </MuiPickersUtilsProvider>

It should be fine to create and use HOC for that and I will probably go for it.