Material ui 材料界面'；s蛇形杆没有向下滑动

我第一次使用了

materialui

，并试图在一篇API帖子成功后实现

Snackbar

。我希望Snackbar向上滑动一个，然后向下滑动一个。我能够实现向上滑动OneNet，但需要“向下滑动onExit”的帮助。有人能帮我吗

import React, { useState } from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Slide from "@material-ui/core/Slide";

const [openSnackBar, setOpenSnackBar] = useState(false);   

const renderSnackbar = () => {
    return (
      <Snackbar
        id="id-success-snackbar"
        className="success-snackbar"
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={openSnackBar}
        autoHideDuration={5000}
        onClose={() => setOpenSnackBar(false)}
        TransitionComponent={Slide}
        message="Test Message"
      />
    );
};

import React，{useState}来自“React”；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/core/Slide”导入幻灯片；
const[openSnackBar，setOpenSnackBar]=useState（false）；
const rendersnakbar=（）=>{
返回(
setOpenSnackBar（错误）}
TransitionComponent={Slide}
message=“测试消息”
/>
);
};

您需要将

TransitionComponent

设置为一个函数，该函数将

TransitionProps

作为其参数，并返回

幻灯片

转场，同时将这些道具展开。从“更改转换”部分中的材质UI文档中，请注意，给出的示例呈现了幻灯片中的转换组件：

function SlideTransition(props: TransitionProps) {
  return <Slide {...props} direction="up" />;
}

我也通过自己的实验发现，只需将

或

幻灯片

放在道具中，snackbar就可以为OneNet设置动画，但不能为onExit设置动画。我希望这能帮助你或其他可能有类似问题的人

import React, { useState } from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Slide from "@material-ui/core/Slide";

const [openSnackBar, setOpenSnackBar] = useState(false);   

const renderSnackbar = () => {
    return (
      <Snackbar
        id="id-success-snackbar"
        className="success-snackbar"
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={openSnackBar}
        autoHideDuration={5000}
        onClose={() => setOpenSnackBar(false)}

        /* set this to the function below */
        TransitionComponent={slideTransition}


        message="Test Message"
      />
    );
};

// Function that should be passed to the TransitionComponent prop above
const slideTransition = (props: TransitionProps) => {
  return <Slide {...props} direction="up" />;
};