CODEWITHSUNDEEP
cssreactjsmaterial-ui
Lara
Lara

Reputation: 3021

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?

Upvotes: 12

Views: 15442

Answers (3)

AminPainter
AminPainter

Reputation: 1

You can use the snackbar's root class and set the top property to 50% (MUI: v6)

<Snackbar
  open={open}
  autoHideDuration={600000}
  onClose={onClose}
  anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
  sx={{ '&.MuiSnackbar-root': { top: '50%' } }}>
</Snackbar>

Upvotes: 0

Aftab Salaria
Aftab Salaria

Reputation: 1

<Snackbar
  open={snackbarOpen}
  autoHideDuration={900} // Adjust the duration as needed
  onClose={handleSnackbarClose}
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
>
  <SnackbarContent
    style={{ backgroundColor: 'red' }}
    message="No results found."
  />
</Snackbar>

Upvotes: -1

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

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"
   }}
   ...
   ...
/>

Upvotes: 23

Related Questions