Sonner 项目中 Toast 组件的宽度与定位问题解析

问题背景

在使用 Sonner 项目的 Toast 组件时，开发者发现当为自定义 Toast 设置 min-width 属性后，Toast 的定位会出现异常，导致部分内容超出屏幕边界。这个问题在 bottom-right 定位时尤为明显，当设置 min-width 为 500px 时，Toast 会被截断，只有通过额外设置 right:10 才能临时解决。

问题现象

• 当设置 position 为 bottom-right 并添加 min-width 属性时，Toast 会超出屏幕边界
• 移除 min-width 后，Toast 显示正常，但无法满足内容需要更多空间的需求
• 类似问题不仅出现在 bottom-right 定位，其他定位方式如 bottom-center 也存在类似问题

技术分析

这个问题本质上是因为 Toast 组件的定位计算方式存在缺陷。当前实现中：

1. 定位是基于 Toast 元素的左侧边缘计算的
2. 当 Toast 宽度增加时，系统没有自动调整定位来适应新的宽度
3. 特别是在屏幕边缘位置，这种计算方式会导致内容溢出

临时解决方案

在官方修复发布前，开发者可以采用以下临时解决方案：

1. 为 Toaster 组件添加自定义类名
2. 应用以下 CSS 样式：

.Toaster {
  --width: unset !important;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.Toaster[data-x-position='center'] {
  justify-content: center;
}

.Toaster[data-x-position='left'] {
  justify-content: flex-start;
}

.Toaster[data-x-position='right'] {
  justify-content: flex-end;
}

这个方案通过 flex 布局和响应式设计，确保 Toast 在不同定位下都能正确显示，同时添加了内边距防止与窗口边缘碰撞。

官方修复

Sonner 项目团队已经在 2.0 版本中修复了这个问题。新版本改进了定位计算逻辑，能够正确处理不同宽度下的 Toast 显示问题。开发者可以等待 2.0 版本发布后升级，以获得更完善的解决方案。

最佳实践建议

1. 对于需要自定义宽度的 Toast，建议先测试在不同屏幕尺寸下的显示效果
2. 考虑使用相对单位(如 vw)而非固定像素值来设置宽度
3. 为边缘定位的 Toast 添加适当的内边距
4. 在升级到 2.0 版本前，可以使用上述临时解决方案作为过渡

这个问题展示了前端组件开发中一个常见挑战：如何在不同尺寸和定位条件下保持组件的正确显示。通过理解问题的本质和解决方案，开发者可以更好地应对类似的布局挑战。