cssreactjsmaterial-ui

Not able to display material ui snackbar in center

I have a material ui snackbar which i need to display in middle of the screen. Below is the property which i am trying to pass to make it display center of the screen but its displaying at top of the screen.

  anchorOrigin={{
   vertical: "center",
   horizontal: "center"
  }}

https://codesandbox.io/s/snackbar-background-color-f37po is the example showcasing the issue. What's wrong here?

Solution

  • To make it vertically align center. We can use sx prop with height: 100% on Snackbar component. Tested in MuiV5 and working fine.

    <Snackbar
   sx={{ height: "100%" }}
   anchorOrigin={{
      vertical: "top",
      horizontal: "center"
   }}
   ...
   ...
/>