为什么我的自定义组件出现 Notistack TS 错误？

Question

我正在向 notistack 添加自定义组件，就像来自 notistack 文档一样，但还有一个额外的字段“描述”，我需要在 props 中接收它。

import { type CustomContentProps, SnackbarContent } from 'notistack';
import React from 'react';
import { type AlertColor } from '...';
import { Alert } from '...;

interface NotistackVariantsProps extends CustomContentProps {
  description?: string;
}

export const NotistackVariants = React.forwardRef<HTMLDivElement, NotistackVariantsProps>(
  (props, ref) => {
    const {
      // You have access to notistack props and options 👇🏼
      id,
      message,
      // as well as your own custom props 👇🏼
      description,
      variant,
      ...other
    } = props;

    return (
      <SnackbarContent ref={ref} role='alert' {...other}>
        <Alert
          id={`${id}`}
          severity={variant as AlertColor}
          variant='filled'
          description={description}
          title={message as string}
        />
      </SnackbarContent>
    );
  },
);

并按照文档包装我的应用程序：

          <SnackbarProvider
            maxSnack={3}
            Components={{
              success: NotistackVariants,
              error: NotistackVariants,
            }}
          >
            <App />
          </SnackbarProvider>

用途：

import { enqueueSnackbar } from 'notistack';

      enqueueSnackbar(title, {
        variant: 'error',
        description: detail, -----> TS error here
        autoHideDuration: OTHER_SEVERITY_TIMEOUT,
      });

但是我在传递描述时收到 TS 错误（附截图）

有人可以帮我吗？ 谢谢。

尝试用不同的方式传递它。

Answer 1

你可以用这样的代码解决它：

declare module 'notistack' {
  interface OptionsObject {
    description: string;
  }
}

另一个例子可以在这里找到： https://notistack.com/features/customization