Estoy tratando de centrar un texto en un muisnackbar pero desafortunadamente no puedo hacerlo. Aquí está el código
soy tomador de cualquier propuesta
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> ); }Probé justificar contenido, AlignItem , AlignContent pero fue en vano Gracias de antemano
Puede pasar este apoyo a un componente Snackbar
ContentProps={{ sx: { display: 'block', textAlign: "center" } }}Para centrar un texto dentro de Snackbar, puede usar la clase .MuiAlert-message , los estilos de esta clase se aplicarán al elemento contenedor del mensaje. Me gusta:-
<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>