Recharts图表覆盖Drawer组件问题求助（Next.js+TailwindCSS）

核心原因 #

1. Recharts的Tooltip、Legend等组件默认通过React Portal挂载到document.body，它们的默认z-index可能高于你设置的Drawer的99，导致显示在顶层。
2. SVG元素本身不遵循CSS的z-index规则，给图表内部元素（如Bar、BarChart）加z-index完全无效，只能通过调整图表容器的堆叠上下文来控制层级。

具体解决方案 #

方案1：调整Recharts Portal组件的z-index #

直接给Tooltip和Legend设置低于Drawer的z-index：

// 在WeeklyIncome组件中修改
<Tooltip zIndex={90} />
<Legend wrapperStyle={{ zIndex: 90 }} />

方案2：优化图表容器的堆叠上下文 #

移除ResponsiveContainer的负数z-index（负数可能导致元素脱离正常堆叠流），改为正数且低于Drawer的z-index：

<ResponsiveContainer
  className="relative z-0"
  style={{
    position: "relative",
    zIndex: 1, // 设置为正数，确保在正常堆叠流中
  }}
>
  {/* ...图表内容 */}
</ResponsiveContainer>

方案3：提高Drawer的z-index优先级 #

把Drawer的z-index从99调高到100，确保绝对高于Recharts元素的默认层级：

// 在Drawer组件中修改
<motion.div
  className={`fixed inset-0 bg-black bg-opacity-50 z-[100]`}
  // ...其他动画属性
>
  <motion.div
    className={`fixed left-0 top-0 w-80 h-full bg-white z-[100]`}
    // ...其他动画属性
  >
    {/* ...Drawer内容 */}
  </motion.div>
</motion.div>

验证效果 #

完成上述修改后，打开Drawer时，图表（包括Tooltip和Legend）会被Drawer及其背景遮罩完全覆盖，达到预期效果。

内容的提问来源于stack exchange，提问作者Octavio Lara