如何创建保留默认动画的自定义react-hot-toast提示框

直接用toast.custom()创建自定义提示框确实会丢失默认动画，但有两种简单方法可以复用内置的enter/exit动画：

方法一：复用内置CSS类 #

react-hot-toast的默认提示框依赖几个内置CSS类实现动画，只要把这些类加到自定义元素上就行，前提是你已经导入了官方的样式文件（import 'react-hot-toast/dist/react-hot-toast.css';）。

代码示例：

toast.custom(
  <div className="toast toast--animate-in toast--animate-out">
    Hello World
  </div>
);

这样自定义提示框就会和默认提示框用一样的动画效果，还能继承默认的基础样式。

方法二：直接传入默认动画配置 #

react-hot-toast的toast对象内置了defaultOptions属性，里面包含了默认的enter和exit动画函数。我们可以直接把这两个函数传给toast.custom()的配置项。

代码示例：

import toast from 'react-hot-toast';

// 从默认配置中解构出动画函数
const { enter, exit } = toast.defaultOptions;

// 传入自定义提示框和动画配置
toast.custom(<div>Hello World</div>, { enter, exit });

这种方法更灵活，不会引入额外的CSS类，适合只需要动画、不想继承默认样式的场景。

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