如何为Notistack中所有Snackbar添加自定义全局关闭按钮

下面提供两种可行的全局生效方案，无需每次调用enqueueSnackbar都重复编写关闭按钮代码：

方案一：封装全局消息调用Hook #

通过封装自定义Hook，统一处理所有消息的action配置，自动添加关闭按钮，同时兼容用户传入的自定义action。

创建工具文件（如src/utils/snackbar.js）：

import { useSnackbar } from 'notistack';

export const useGlobalSnackbar = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const showSnackbar = (message, options = {}) => {
    // 定义全局默认的关闭按钮
    const defaultCloseBtn = (key) => (
      <button size="small" onClick={() => closeSnackbar(key)}>
        关闭
      </button>
    );

    // 合并用户自定义action和全局关闭按钮
    const finalAction = options.action
      ? (key) => (
        <>
          {options.action(key)}
          {defaultCloseBtn(key)}
        </>
      )
      : defaultCloseBtn;

    enqueueSnackbar(message, {
      ...options,
      action: finalAction,
    });
  };

  return { showSnackbar, closeSnackbar };
};

使用方式：
在任意组件中替换原有的useSnackbar，调用封装后的showSnackbar即可：

import { useGlobalSnackbar } from '../utils/snackbar';

function MyComponent() {
  const { showSnackbar } = useGlobalSnackbar();

  const handleClick = () => {
    // 普通调用，自动带关闭按钮
    showSnackbar('操作成功');
    // 带自定义action的调用，会同时显示自定义按钮和关闭按钮
    showSnackbar('有新消息', {
      action: (key) => (
        <button onClick={() => console.log('查看详情', key)}>
          详情
        </button>
      )
    });
  };

  return <button onClick={handleClick}>触发消息</button>;
}

方案二：自定义Snackbar组件并全局配置 #

通过替换Notistack默认的SnackbarContent组件，全局为所有消息添加关闭按钮，这种方式更彻底，无需修改原有调用逻辑。

创建自定义Snackbar组件（如src/components/CustomSnackbar.js）：

import { SnackbarContent, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';

const CustomSnackbar = ({ children, closeSnackbar, key, ...props }) => {
  return (
    <SnackbarContent
      {...props}
      action={
        <>
          {/* 保留用户传入的自定义action */}
          {props.action}
          {/* 全局添加的关闭按钮 */}
          <IconButton size="small" onClick={() => closeSnackbar(key)}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </>
      }
    >
      {children}
    </SnackbarContent>
  );
};

export default CustomSnackbar;

在全局SnackbarProvider中配置该组件：

import { SnackbarProvider } from 'notistack';
import CustomSnackbar from './components/CustomSnackbar';

function App() {
  return (
    <SnackbarProvider
      snackbarProps={{
        ContentProps: {
          component: CustomSnackbar
        }
      }}
    >
      {/* 你的应用根组件 */}
    </SnackbarProvider>
  );
}

说明：
配置完成后，所有通过enqueueSnackbar弹出的消息都会自动带上关闭按钮，若原有调用传入了action，会和全局关闭按钮一同显示。

内容的提问来源于stack exchange，提问作者Alireza Bagheri