SuperAPI AI 工具集

ask-sonner

前端与建站

查看项目

更新于 10-15 23:48

技能介绍

用途:面向 Sonner(React toast 库)的指南技能,用于实现与排查 toast,涵盖安装集成、promise 流程、样式、主题、定位,以及重复或缺失 toast 等问题。改动代码前应先检查已安装版本与当前集成方式。

主要能力:指导 <Toaster /> 与 toast() 的正确用法;区分普通消息、success/error/info/warning、loading、toast.promise、带 action 按钮、自定义 JSX 与 headless 自定义等调用方式;说明更新、持久、关闭、读取活动 toast、多 Toaster 定向、关闭回调等用法;给出样式升级路径(默认、内联、classNames、headless)与主题设置;并提供常见症状到原因与修复的排查表。

使用方式:只挂载一个 <Toaster />,尽量靠近根节点(Next.js 中为 layout.tsx,可在服务端组件内工作),不要按页或条件渲染;toast() 在客户端代码(事件处理器、effect、回调)中调用,无需 hook 或 provider,服务端不生效,服务端 action 应返回结果后在客户端调用 toast()。示例:import { Toaster } from 'sonner'; import { toast } from 'sonner';。

适用场景:React 项目中使用 Sonner 实现提示消息、加载到成功/失败的 promise 流程、自定义样式与主题、多容器定向等。

限制:完整 prop 表位于 API.md,仅在需要精确 prop 名、类型或默认值时使用,并需针对已安装包验证版本相关行为;Sonner 注入样式在层叠中优先,类名需 !important;主题默认 'light' 不跟随系统;Shadow DOM、Astro、视图过渡等场景需额外处理样式。资料未提供收费、价格与平台信息。