Material-UI Snackbar on React gets fixed to the bottom of the page

Question

I am using Material UI Snackbar in a component, but the Snackbar shows up at the bottom of the page and isn't fixed so user will have to scroll to the bottom to see it.

<Snackbar>
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
>
  <Alert onClose={handleClose} severity="error">
    There was an error signin up. Please  try again!
  </Alert>
</Snackbar>

Here is the picture:

score 0 · Answer 1 · answered May 02 '21 at 12:04

By nature <Snackbar /> sticks to bottom by position: fixed.

Maybe one of its parents breaks its fixed position, for example by having transform or will-change: transform.

<div style={{ willChange: "transform" }}>
  <Snackbar open={open} onClose={handleClose}>
    <Alert onClose={handleClose} severity="error">
      There was an error signin up. Please try again!
    </Alert>
  </Snackbar>
</div>

https://codesandbox.io/s/material-demo-forked-gvlmk?file=/demo.js

More info about what breaks position: fixed:

Material-UI Snackbar on React gets fixed to the bottom of the page

1 Answers1