component

import React, { forwardRef, useImperativeHandle, useCallback } from "react";
import {
  Button,
  Snackbar as MaterialSnackbar,
  IconButton,
} from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";

export const snackbar: React.RefObject<{
  show: () => void;
  hidden: () => void;
  setAutoHideDuration: React.Dispatch<React.SetStateAction<number>>;
  message: React.Dispatch<React.SetStateAction<string>>;
}> = React.createRef();

const Snackbar = forwardRef((_: any, ref: any) => {
  const [open, setOpen] = React.useState(false);
  const [message, setMessage] = React.useState("");
  const [autoHideDuration, setAutoHideDuration] = React.useState(3000);

  const show = useCallback(() => {
    setOpen(true);
  }, []);

  const hidden = useCallback(() => {
    setOpen(false);
  }, []);

  useImperativeHandle(
    ref,
    () => ({
      show,
      hidden,
      setAutoHideDuration,
      message: setMessage,
    }),
    [hidden, show]
  );

  const handleClose = (
    event: React.SyntheticEvent | React.MouseEvent,
    reason?: string
  ) => {
    // 点击了其他地方
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  };

  return (
    <MaterialSnackbar
      anchorOrigin={{
        vertical: "top",
        horizontal: "right",
      }}
      open={open}
      autoHideDuration={autoHideDuration}
      onClose={handleClose}
      message={message}
      action={
        <React.Fragment>
          <Button color="secondary" size="small" onClick={handleClose}>
            UNDO
          </Button>
          <IconButton
            size="small"
            aria-label="close"
            color="inherit"
            onClick={handleClose}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
        </React.Fragment>
      }
    />
  );
});

const MySnackbar = () => <Snackbar ref={snackbar} />;

export default MySnackbar;

App.tsx

 <MaterThemeProvider theme={theme}>
        <GlobalStyle />
        <Router>
          <Switch>
            {routes.map(renderRoute)}
            <Redirect to="notfound" />
          </Switch>
        </Router>
        <Snackbar />
      </MaterThemeProvider>

use

import { snackbar } from "../../components/UI/Snackbar";

snackbar.current?.show();
snackbar.current?.message(`Hello ${user.name}`);
snackbar.current?.setAutoHideDuration(2000);