Estoy tratando de colocar un Snackbar en la parte superior derecha con algo de personalización superior, pero no puedo configurarlo correctamente.
Aquí está mi intento:
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> ); }Entonces lo intenté
const StyledSnackbar = styled(Snackbar)(() => ({ "& MuiSnackbar-root": { top: "100px", }, }));Pero sigue sin funcionar, el Snackbar está fijo arriba/a la derecha
Finalmente lo descubrí, pero no estoy seguro de si esta es la mejor manera de implementarlo. ¿Por favor, hágame saber sus pensamientos? y si hay una mejor manera de hacerlo.
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> ); }