0

react-toastify用来显示我的吐司,我创建了一个组件,允许我根据类型显示吐司。

 import { Slide, toast } from 'react-toastify';

  const options = {
  autoClose: 5000,
  position: toast.POSITION.TOP_CENTER,
  transition: Slide,
 closeOnClick: true,
  closeButton: false,

 };

   const Alert = (type: string, message: string) => {
  switch (type) {
case 'warning':
  return toast.warning(message);
case 'error':
  return toast.error(message, options);
case 'success':
  return toast.success(message);
case 'info':
  return toast.info(message);
case 'dark':
  return toast.dark(message);
default:
  return toast(message);
  }
 };
 export default Alert;

下一个电话:

 Alert('error', 'Try Again');

options确定我要配置的所有选项

但是如果我添加选项theme: 'colored'

我最终得到以下消息:

   Argument of type '{ autoClose: number; position: ToastPosition; transition: ({ 
  children, position, preventExitTransition, done, nodeRef, isIn }: 
 ToastTransitionProps) => JSX.Element; closeOnClick: boolean; closeButton: boolean; 
them
  e: string; }' is not assignable to parameter of type 'ToastOptions<{}>'.
 Types of property 'theme' are incompatible.
Type 'string' is not assignable to type 'Theme | undefined'.

另一方面,如果我以不同的方式拨打电话

  case 'error':
    return toast.error(message, {
      theme: 'colored',
    });

我没有错误信息。

如何确保主题出现在选项中?

4

0 回答 0