Sonner库中Toast.promise成功图标缺失问题解析

问题现象

在使用Sonner库的toast.promise功能时，开发者发现当Promise成功解析(resolve)后，预期的成功图标没有正常显示。这个问题不仅出现在开发者自己的项目中，在Sonner官方文档网站上也能复现相同的现象。

问题分析

从开发者提供的截图和描述来看，这个问题主要涉及两个方面：

1. 样式问题：控制图标显示的CSS属性值出现了"undefinedpx"这样的非法值，导致图标无法正确渲染。这表明在样式计算过程中，某些预期值没有被正确传递或处理。

2. 自定义图标冲突：当开发者尝试自定义各种状态(成功、信息、警告、错误、加载中)的图标时，出现了加载中图标(spinner)和成功图标同时显示的问题。正常情况下，加载中图标应该在Promise解析后被成功图标替换。

技术背景

Toast.promise是Sonner库提供的一个实用功能，它允许开发者简洁地处理异步操作的状态反馈。其工作原理是：

1. 当调用toast.promise时，首先显示加载状态(通常带有旋转图标)
2. 等待Promise解析：
   • 如果成功(resolve)，转换为成功状态(显示成功图标)
   • 如果失败(reject)，转换为错误状态(显示错误图标)

解决方案

根据仓库所有者的反馈，这些问题已经在版本1.4.2中通过提交修复。对于遇到类似问题的开发者，建议：

1. 确保使用的是最新版本的Sonner库
2. 检查自定义图标的配置是否正确
3. 如果仍然存在问题，可以检查CSS样式是否被意外覆盖

对于自定义图标同时显示的问题，开发者可以尝试以下方法：

1. 确保自定义加载图标和成功图标使用相同的容器或显示逻辑
2. 检查是否有额外的CSS导致图标堆叠显示
3. 考虑在自定义图标组件中添加适当的样式控制

最佳实践

在使用Sonner的toast.promise功能时，建议开发者：

1. 始终测试各种状态(加载中、成功、失败)的显示效果
2. 自定义图标时，保持图标尺寸和样式的一致性
3. 在更新库版本后，重新验证所有toast功能
4. 考虑在不同设备和浏览器上进行兼容性测试

通过遵循这些实践，可以确保toast通知在各种场景下都能提供一致且良好的用户体验。