Sonner库与Radix UI Dialog的z-index层级冲突解决方案

问题背景

在使用Sonner通知库与Radix UI对话框组件时，开发者经常会遇到一个典型的z-index层级问题：当对话框打开时，Sonner的通知虽然视觉上显示在对话框上方，但实际上却被对话框遮挡，导致无法点击通知上的关闭按钮或进行交互操作。

问题根源分析

经过深入排查，发现这个问题主要由两个因素共同导致：

1. Radix UI对话框的特殊处理：Radix UI的Dialog组件会在打开时自动给body元素添加pointer-events: none样式，这是为了正确处理对话框外部的点击事件。但这种处理方式会意外影响其他需要交互的组件。

2. z-index堆叠上下文：即使开发者手动设置了较高的z-index值，由于Radix UI的这种特殊处理，通知元素仍然无法获得应有的交互能力。

解决方案汇总

方案一：调整组件挂载位置

将Toaster组件直接挂载在React渲染根节点下，与主应用组件同级：

ReactDOM.createRoot(document.getElementById('app')!).render(
  <>
    <App />
    <Portal.Root>
      <Toaster richColors />
    </Portal.Root>
  </>
);

这种方法确保了Toaster组件位于独立的渲染层级中，避免了与对话框组件的样式冲突。

方案二：强制启用指针事件

对于Next.js等现代框架用户，可以在Toaster组件上添加指针事件强制启用：

<Toaster className="pointer-events-auto" />

或者通过CSS全局覆盖：

body {
  pointer-events: auto !important;
}

方案三：深度集成Radix UI的DismissableLayer

对于需要更精细控制的高级场景，可以使用Radix UI的DismissableLayer组件进行深度集成：

<Portal>
  <DismissableLayer.Root asChild>
    <Toaster {...props} />
  </DismissableLayer.Root>
</Portal>

这种方法需要Toaster组件支持ref转发，目前需要通过修改Sonner源码或等待官方支持。

最佳实践建议

1. 框架适配：对于Next.js项目，建议将Toaster放置在根布局(layout.tsx)中，并确保其位于Portal容器内。

2. 样式覆盖：优先使用pointer-events-auto方案，它侵入性最小且易于维护。

3. 版本兼容：关注Radix UI和Sonner的版本更新，官方可能会在未来版本中提供更优雅的解决方案。

技术原理深入

这个问题本质上涉及CSS的堆叠上下文(Stacking Context)和指针事件处理机制。当Radix UI对话框打开时：

1. 创建了新的堆叠上下文
2. 禁用了body上的指针事件
3. 在其内部重新启用了对话框内容的指针事件

而Sonner的通知默认继承了body的指针事件设置，因此即使视觉上层级正确，也无法接收交互事件。理解这一机制有助于开发者更灵活地处理类似的前端层级问题。

通过上述解决方案，开发者可以确保Sonner通知在各种场景下都能正常工作，与Radix UI对话框和谐共存。