如何在 notistack 中添加自定义全局关闭按钮

Question

我想在我的项目中的所有小吃店的 notistack 中添加一个自定义关闭按钮

我只是找到以下方式：

enqueueSnackbar('I use snackbars responsibly', {
            variant: 'default',
            action: (key) => (
                <Fragment>
                    <Button
                        size='small'
                        onClick={() => alert(`Clicked on action of snackbar with id: ${key}`)}
                    >
                        Detail
                    </Button>
                    <Button size='small' onClick={() => closeSnackbar(key)}>
                        Dismiss
                    </Button>
                </Fragment>
            )
        });

但这种方式只适用于一家小吃店

Answer 1

你可以试试这种方式

_app.js 文件

import { SnackbarProvider, useSnackbar } from 'notistack';

function SnackbarCloseButton({ snackbarKey }) {
  const { closeSnackbar } = useSnackbar();

  return (
    <IconButton onClick={() => closeSnackbar(snackbarKey)}>
      <IconClose />
    </IconButton>
  );
}

<SnackbarProvider action={snackbarKey => <SnackbarCloseButton snackbarKey={snackbarKey} />}>
  ...
</SnackbarProvider>