Estoy creando una aplicación web con Material UI . Estoy tratando de hacer una pila de notificaciones usando Alert . (Sé notistack , pero no me gusta).

Pienso en lo siguiente...

1. Tengo que tener una pila de notificaciones.
2. La aplicación apila las notificaciones.
3. Cuando el usuario hace clic en un botón, muestra todas las notificaciones que están en la pila.

Para implementar esto, creo que debería usar Alert + Collapse . Un gran problema que veo es que cada Collapse necesita un gancho (creado con useState ). No estoy muy seguro de cómo hacer esto. Además, el uso de la matriz AllNotify (consulte el código siguiente) ya que la pila de notificaciones no funciona.

¿Alguien me puede ayudar?

 let AllNotify = []; export const NotifyPush = (severity,msg) => { AllNotify.push({severity: severity, msg: msg}); }; const NotifyBalloon = (notify) => { //const [open, setOpen] = useState(true); return ( <Collapse in={true}> <Alert sx={{boxShadow: 2}} icon={<CheckIcon fontSize="inherit" />} severity={notify.severity} action={ <IconButton aria-label="close" color="inherit" size="small" onClick={() => {}} > <CloseIcon fontSize="inherit" /> </IconButton> }> {notify.msg} </Alert> </Collapse> ); }; export const NotifyStack = (props) => { return ( <Stack sx={{ width: '95%' }} spacing={1}> { AllNotify.reverse().map((notify) => NotifyBalloon(notify)) } </Stack> ); };