MUI表格粘性行hover时底层内容可见问题求助

你的问题核心是hover用的半透明背景色导致下方内容透出，rgba(0, 0, 0, 0.01)透明度极高，再结合粘性行的层级设置，给你两个直接可行的解决办法：

方法一：改用不透明hover背景色（最简单） #

把hover背景换成视觉效果接近的不透明浅色，既能保留hover反馈，又彻底解决透底问题：

/* 替换原hover样式 */
.sticky-row:hover {
  background-color: #fafafa; /* 和原半透明色视觉差异极小，但完全不透明 */
}

方法二：保留半透明背景，提升hover层级 #

如果必须用半透明效果，hover时给粘性行提高z-index，确保它完全覆盖下方内容：

/* 粘性行基础样式 */
.sticky-row {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 20;
  border-right: 1px solid #d9d9d9;
}

/* 修改后的hover样式 */
.sticky-row:hover {
  background-color: rgba(0, 0, 0, 0.01);
  z-index: 21; /* hover时提升层级，压过下方内容 */
}

如果用MUI的styled方案（v5版本），可以直接集成到组件：

import { styled } from '@mui/material/styles';
import TableRow from '@mui/material/TableRow';

const StickyTableRow = styled(TableRow)(({ theme }) => ({
  position: 'sticky',
  left: 0,
  backgroundColor: theme.palette.common.white,
  zIndex: 20,
  borderRight: '1px solid #d9d9d9',
  '&:hover': {
    backgroundColor: 'rgba(0, 0, 0, 0.01)',
    zIndex: 21,
  },
}));

注：如果你的"粘性行"实际是粘性列（因为样式写了left: 0），把上述样式应用到TableCell组件上即可，逻辑完全一致。

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