import { Button, Fade, Grow, Slide, Snackbar } from "@mui/material"; import React from "react"; function SlideTransition(props) { return <Slide {...props} direction="up" />; } function GrowTransition(props) { return <Grow {...props} />; } export default function TransitionsSnackbar() { const [state, setState] = React.useState({ open: false, Transition: Fade, }); const handleClick = (Transition) => () => { setState({ open: true, Transition }); }; function handleClose() { setState({ ...state, open: false }); } return ( <div> <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button> <Button onClick={handleClick(Fade)}>Fade Transition</Button> <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button> <Snackbar open={state.open} onClose={handleClose} TransitionComponent={state.Transition} ContentProps={{ "aria-describedby": "message-id" }} message={<span id="message-id">I love snacks</span>} /> </div> ); }