I'm trying to center a text in a muisnackbar but unfortunately I can't do it. Here is the code
I am taker of any proposal
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import Snackbar from "@mui/material/Snackbar";
import MuiAlert, { AlertProps } from "@mui/material/Alert";
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
export default function CustomizedSnackbars() {
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(true);
};
const handleClose = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
};
return (
<Stack spacing={2} sx={{ width: "100%" }}>
<Button variant="outlined" onClick={handleClick}>
Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
This is a success message!
</Alert>
</Snackbar>
</Stack>
);
}
I tested justifyContent, AlignItem , AlignContent but in vain Thank you in advance
You can pass this prop to a Snackbar component
ContentProps={{
sx: {
display: 'block',
textAlign: "center"
}
}}
To center a text inside Snackbar you can use .MuiAlert-message class, styles of this class will be applied to the message wrapper element. Like:-
<Snackbar open={true} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: '300px','& .MuiAlert-message':{textAlign:"center", width:"inherit"} }}>
This is a success message!
</Alert>
</Snackbar>