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
Share Improve this question asked Dec 10, 2021 at 17:06 MoeMoe 1,5375 gold badges38 silver badges59 bronze badges5 Answers
Reset to default 2Here'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;
}