Ark UI 中 Solid 版 Toast 组件类名未正确应用的解决方案

问题背景

在 Ark UI 3.2.1 版本的 Solid 框架实现中，Toast 组件的根元素未能正确应用 toast__root 类名。这是一个典型的样式类名未正确传递的问题，会影响组件的样式表现和主题一致性。

问题分析

Toast 组件是通知系统中的重要组成部分，其根元素的类名对于样式控制至关重要。在原始实现中，开发人员发现以下代码存在问题：

export const ToastRoot = (props: ToastRootProps) => {
  const toast = useToastContext()
  return (
    <div {...toast().getRootProps()}>
      <div {...toast().getGhostBeforeProps()} />
      {props.children}
      <div {...toast().getGhostAfterProps()} />
    </div>
  )
}

这段代码虽然能够渲染 Toast 组件，但未能正确合并传入的 props，导致 toast__root 类名丢失。经过分析，问题出在 props 合并的处理上。

解决方案

正确的实现应该使用 Solid 的 mergeProps 方法来合并上下文提供的 props 和组件接收的 props：

const RootFixed = (props: RootFixedProps) => {
  const toast = useToastContext();
  const mergedProps = mergeProps(() => toast().getRootProps(), props);

  return (
    <ark.div {...mergedProps}>
      <ark.div {...toast().getGhostBeforeProps()} />
      {props.children}
      <ark.div {...toast().getGhostAfterProps()} />
    </ark.div>
  );
};

这个修正版本解决了以下关键问题：

1. 使用 mergeProps 正确合并了上下文和传入的 props
2. 保留了 ghost 元素的功能性
3. 确保了类名的正确应用

技术细节

值得注意的是，虽然使用了 ark.div，但开发者特意没有在所有地方都替换为 ark.div，这是因为：

1. ark.div 本身已经内置了 ghost 元素处理逻辑
2. 直接替换会导致 asChild 属性的行为异常
3. 需要保持对自定义子组件的兼容性

这种精细的控制体现了 Ark UI 设计中对组件扩展性和灵活性的重视。

总结

这个问题的解决展示了在组件库开发中 props 合并的重要性，特别是在需要同时处理上下文属性和用户自定义属性的场景下。通过正确的 props 合并策略，可以确保组件的样式和行为保持一致，同时保持足够的灵活性。

Ark UI 团队已经将此修复纳入最新版本，开发者只需升级到最新版即可解决此类问题。这个案例也为开发者提供了处理类似组件属性传递问题的参考模式。