action.tsx

import { createRoot } from "react-dom/client";
import Message from "./index";

const dom: HTMLDivElement = document.createElement("div");
const message = {
  success: (text: string, time: number) => {
    const JSXdom: JSX.Element = (
      <Message content={text} duration={time} type="success"></Message>
    );
    createRoot(dom).render(JSXdom);
    document.body.appendChild(dom);
  },
  info: (text: string, time: number) => {
    const JSXdom: JSX.Element = (
      <Message content={text} duration={time} type="info"></Message>
    );
    createRoot(dom).render(JSXdom);
    document.body.appendChild(dom);
  },
  error: (text: string, time: number) => {
    const JSXdom: JSX.Element = (
      <Message content={text} duration={time} type="error"></Message>
    );
    createRoot(dom).render(JSXdom);
    document.body.appendChild(dom);
  },
  warning: (text: string, time: number) => {
    const JSXdom: JSX.Element = (
      <Message content={text} duration={time} type="warning"></Message>
    );
    createRoot(dom).render(JSXdom);
    document.body.appendChild(dom);
  },
};

export default message;

index.tsx

import { useState } from "react";
import { Snackbar, Alert } from "@mui/material";
interface PropsType {
  content: string;
  duration: number;
  type: AlertColor;
}
type AlertColor = "success" | "info" | "warning" | "error";

const Message = (props: PropsType) => {
  const { content, duration, type } = { ...props };
  const [open, setOpen] = useState(true);
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <Snackbar
      open={open}
      autoHideDuration={duration}
      anchorOrigin={{ vertical: "top", horizontal: "center" }}
      onClose={handleClose}
    >
      <Alert severity={type} variant="standard">
        {content}
      </Alert>
    </Snackbar>
  );
};

export default Message;

详细可参考：juejin.cn/post/714454…

欢迎指出问题！ ---小趴菜的react记录---