React 18中Material UI表格行Hover样式失效问题求解

问题核心是单元格行内样式（style属性）优先级高于父元素TableRow的hover样式，导致行hover时无法覆盖单元格背景色。同时需要让每个单元格在父行hover时，基于自身动态属性计算加深后的背景色。

步骤1：修改自定义单元格组件 #

将单元格的背景色从行内style移到sx中，并添加父行hover时的样式规则：

import { TableCell } from '@mui/material';
// 如需颜色加深工具函数，可引入MUI的darken
import { darken } from '@mui/material/styles';

export const MyCustomCell = (props) => {
  const baseColor = getCellBackground(props);
  // 可直接基于基础色生成hover色，或沿用你现有的getCellBackgroundOnHover逻辑
  const hoverColor = getCellBackgroundOnHover(props);
  // 替代方案：const hoverColor = darken(baseColor, 0.1);

  return (
    <TableCell
      sx={{
        backgroundColor: baseColor,
        // 监听父TableRow的hover状态，应用当前单元格的hover背景色
        '.MuiTableRow-root:hover &': {
          backgroundColor: hoverColor
        }
      }}
    >
      {betterTiming(props)}
    </TableCell>
  );
};

步骤2：简化TableRow代码 #

无需在TableRow中额外设置hover背景色，保留基础样式即可：

<TableRow
  role="checkbox"
  sx={{
    '&:last-child td, &:last-child th': { border: 0 }
  }}
  tabIndex={-1}
>
  {/* 渲染MyCustomCell组件 */}
</TableRow>

关键说明 #

1. 优先级修正：行内style的优先级高于CSS类样式，必须将单元格背景色移到sx（通过CSS类实现），父元素的hover样式才能正常覆盖。
2. 父状态联动：使用.MuiTableRow-root:hover &选择器，可监听父行的hover状态，让每个单元格独立计算并应用自身的hover背景色，实现整行hover时所有单元格同步加深的效果。

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