Material-ui 多个小吃栏

Question

我试图使用 material ui 的 Snackbar 获得多个警告，到目前为止他们还没有成功，我看到了一些使用 Vue 的例子，但没有反应，有人可以帮助我吗？按照我下面的代码

https://codesandbox.io/embed/withered-sunset-ru3p3?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Material-ui 默认不允许多个小吃栏。事实上，材料设计规范“不鼓励”这种行为。不过，如果您确实想让它工作，您可以使用第三方库，例如 notistack，它使用与material-ui 中完全相同的组件。

Answer 2

messages = [{'id': uuidv4(), 'message': 'invalid input', 'severity': 'error'}, {'id': uuidv4(), 'message': 'document updated successfully', 'severity': 'success'}]

，其中 uuidv4()

import { v4 as uuidv4 } from "uuid";

。我对每个消息 ID 使用 uuid，而不是其在列表中的索引，因为一旦删除消息，不同的消息可以共享相同的索引。这种方法解决了

<Stack />

仅显示 1 个

<Snackbar />

（或多个 Snackbar，但彼此重叠）的问题。

/// reducer
case SNACKBAR_WRITE:
  return {
    ...state,
    messages: [
      ...state.messages,
      {
        id: uuidv4(),
        message: payload.message,
        severity: payload.severity,
      },
    ],
  };
case SNACKBAR_DELETE:
  return {
    ...state,
    messages: state.messages.filter((message) => message.id !== payload),
  };

/// custom component
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { remove_snackbar } from "../../actions/auth";
import { Alert } from "@mui/material";

const CustomAlert = ({ message, remove_snackbar }) => {
    useEffect(() => {
      setTimeout(function () {
          remove_snackbar(message.id);
      }, 8000);
    }, [message, remove_snackbar]);

    const handleAlertClose = (event, reason) => {
      if (reason === "clickaway") {
          return;
      }
      remove_snackbar(message.id);
    };

    return (
      <Alert
          onClose={handleAlertClose}
          elevation={6}
          variant="filled"
          severity={message.severity}
      >
          {message.message}
      </Alert>
    );
};

export default connect(null, { remove_snackbar })(CustomAlert);

///main jsx
<Stack sx={{ position: "absolute", bottom: 24, right: 24 }} spacing={2}>
   {messages.map((message) => (<CustomAlert message={message} key={message.id} />))}
</Stack>

Answer 3

https://github.com/sai6855/material-ui-advanced?tab=readme-ov-file#components-included

。在此列表中，您会发现堆叠的小吃店