MUI-Datatables表头在模态框弹出时悬浮重叠问题求助

问题说明 #

弹出模态框时，背景表格的固定表头仍悬浮显示，会与模态框重叠且可点击。经排查问题源于表头的-MUIDataTableHeadCell-fixedHeader类，但直接移除该类会导致表格排序功能失效。

可行解决方案 #

方案1：提升模态框层级 #

给模态框及其遮罩层设置更高的z-index，确保覆盖在固定表头之上：

/* 调整模态框容器层级 */
.MuiModal-root {
  z-index: 1300 !important;
}

/* 同步调整遮罩层层级 */
.MuiBackdrop-root {
  z-index: 1299 !important;
}

方案2：模态框打开时临时取消表头固定 #

通过状态控制，在模态框弹出时给表头添加临时样式，关闭后恢复：

// 用状态控制模态框显示
const [modalOpen, setModalOpen] = useState(false);

// 给表格表头动态绑定类名
<TableHead className={modalOpen ? "temp-disable-fixed" : ""}>...</TableHead>

对应的CSS：

.temp-disable-fixed .-MUIDataTableHeadCell-fixedHeader {
  position: relative !important;
}

方案3：模态框打开时禁用表头点击 #

通过状态判断，在模态框显示时阻止表头的点击事件：

const handleHeaderClick = (e) => {
  if (modalOpen) {
    e.stopPropagation();
    e.preventDefault();
  }
};

// 给表头单元格绑定点击拦截事件
<MUIDataTableHeadCell onClick={handleHeaderClick} ...>...</MUIDataTableHeadCell>

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