I am trying to position a Snackbar to the top right with some top: customization but I not able to set it correctly.

Here is my attempt:

import React from "react";
import { Snackbar, Alert } from "@mui/material";

import { styled } from "@mui/material/styles";
const StyledSnackbar = styled(Snackbar)(({ theme, props }) => ({
  "& MuiSnackbar-root": {
    top: theme.spacing(15),
  },
}));

export default function Notification(props) {
  const { notify, setNotify } = props;
  return (
    <StyledSnackbar
      open={notify.isOpen}
      autoHideDuration={3000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert severity={notify.type}>{notify.message}</Alert>
    </StyledSnackbar>
  );
}

Then I tried

const StyledSnackbar = styled(Snackbar)(() => ({
  "& MuiSnackbar-root": {
    top: "100px",
  },
}));

But it's still not working, the Snackbar is fixed to top/right

I am trying to position a Snackbar to the top right with some top: customization but I not able to set it correctly.

Here is my attempt:

import React from "react";
import { Snackbar, Alert } from "@mui/material";

import { styled } from "@mui/material/styles";
const StyledSnackbar = styled(Snackbar)(({ theme, props }) => ({
  "& MuiSnackbar-root": {
    top: theme.spacing(15),
  },
}));

export default function Notification(props) {
  const { notify, setNotify } = props;
  return (
    <StyledSnackbar
      open={notify.isOpen}
      autoHideDuration={3000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert severity={notify.type}>{notify.message}</Alert>
    </StyledSnackbar>
  );
}

Then I tried

const StyledSnackbar = styled(Snackbar)(() => ({
  "& MuiSnackbar-root": {
    top: "100px",
  },
}));

But it's still not working, the Snackbar is fixed to top/right

• javascript
• reactjs
• typescript
• material-ui

5 Answers 5

Here's my approach which seems to work nicely with MUI v5. I've overriden the MuiSnackbar-root class to have a different bottom value. You could do the same with top, left and right as you desire.

    <Snackbar
      open={open}
      autoHideDuration={timeout * 1000}
      onClose={handleClose}
      sx={{
        '&.MuiSnackbar-root': { bottom: '50px' },
      }}
    >
      <SnackbarContent
        sx={{ backgroundColor: '#bb4420' }}
        message={message}
        action={action}
      />
    </Snackbar>

Doesn't look like Snackbar ponent provides any means of precise positioning, apart from the fairly limited anchorOrigin.

It's root element uses position: fixed hence wrapping it with properly styled <Portal> doesn't help either.

Source code of the ponent responsible for positioning.

I added the following to my theme. It may also apply when using styled()

MuiSnackbar: {
        styleOverrides: {
            root: {
                "& .MuiSnackbar-root": {
                    padding: 0,
                },
                "&.MuiSnackbar-root.MuiSnackbar-anchorOriginTopRight": {
                    maxWidth: "500px",
                    top: 76
                },
                "& .MuiSnackbarContent-root": {
                    padding: 0
                },
                "& .MuiSnackbarContent-message": {
                    padding: 0
                }
            }
        }
    },

I finally figured it out, but I am not sure if this is the best way implementing it. please let me know your thoughts? and if there is a better way of doing it.

import React from "react";
import { Snackbar, Alert } from "@mui/material";

import { styled } from "@mui/material/styles";

const StyledSnackbar = styled((props) => <Snackbar {...props} />)(
  ({ theme }) => ({
    "& .MuiSnackbar-root": {
      top: theme.spacing(15),
    },
  })
);

export default function Notification(props) {
  const { notify, setNotify } = props;
  return (
    <StyledSnackbar
      open={notify.isOpen}
      autoHideDuration={3000}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
    >
      <Alert severity={notify.type}>{notify.message}</Alert>
    </StyledSnackbar>
  );
}

I use this in my stylesheet.css

.MuiSnackbar-anchorOriginTopCenter {
  top: 150px !important;
}