How to center a text in mui snackbar-CodePudding

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

CodePudding user response：

You can pass this prop to a Snackbar component

ContentProps={{
  sx: {
    display: 'block',
    textAlign: "center"
  }
}}

CodePudding user response：

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>