React-Calendar-Timeline 内嵌模态框 z-index 层级异常无法正常显示问题

问题根因 #

你遇到的层级失效问题本质是层叠上下文限制，原因如下：

• React-Calendar-Timeline 内部的.rct-scroll容器默认配置了overflow-y: hidden，会裁剪超出容器范围的内容，你的模态框写在条目内部，高度超过条目高度的部分会直接被切掉
• 时间线的条目容器、行容器都会创建独立的层叠上下文，你在条目内部给模态框设置的z-index无论多高，都只会在当前条目的层叠上下文内生效，无法和时间线其他层级的元素做优先级对比

可行解决方案 #

推荐优先用 React Portal 方案，对原有逻辑侵入最小：

方案1：使用React Portal挂载模态框 #

将模态框从条目内部移到应用根节点（或body）下，完全脱离时间线的层叠上下文限制：

1. 新增状态存储选中条目的位置信息：

const [activeModal, setActiveModal] = useState({id: null, top: 0, left: 0})

2. 修改条目双击事件，计算点击条目在页面中的绝对坐标：

onDoubleClick={(e) => {
  const rect = e.currentTarget.getBoundingClientRect()
  if (activeModal.id === item.id) {
    setActiveModal({id: null, top:0, left:0})
  } else {
    setActiveModal({
      id: item.id,
      top: rect.top + window.scrollY + 20, // 20是模态框和条目的间距
      left: rect.left + window.scrollX
    })
  }
}}

3. 在App组件根级别用Portal渲染模态框：

import { createPortal } from 'react-dom'

// return里加这段，和Timeline同级
{activeModal.id && createPortal(
  <ItemModal style={{top: `${activeModal.top}px`, left: `${activeModal.left}px`}}>
    <span>Teste</span>
  </ItemModal>,
  document.body
)}

4. 移除原来写在itemRenderer内部的模态框代码即可。

方案2：修改时间线默认样式（不推荐） #

如果不想用Portal，可以修改全局CSS覆盖时间线默认配置，但是可能影响时间线原有滚动体验：

/* 允许滚动容器显示超出内容 */
.react-calendar-timeline .rct-scroll {
  overflow-y: visible !important;
}
/* 给条目容器设置更高的层级优先级 */
.react-calendar-timeline .rct-item {
  position: relative !important;
  z-index: 10 !important;
}
/* 选中的条目层级再提高，避免被其他条目遮挡 */
.react-calendar-timeline .rct-item:has(.item-modal) {
  z-index: 9999 !important;
}

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