Angular应用Material表格选中行hover时选中状态消失问题求助

这种问题核心原因是选中行的样式优先级低于hover状态样式，导致鼠标悬停时hover样式覆盖了选中行的视觉标识（比如背景色）。

排查步骤 #

1. 打开浏览器开发者工具（F12），选中已激活选中状态的表格行
2. 查看控制选中状态的CSS类（Material UI默认是.Mui-selected）的样式属性
3. 触发行hover状态，对比hover类（如.MuiTableRow-hover:hover）的样式优先级，确认background-color等属性是否覆盖了选中样式

解决方案 #

方案1：自定义CSS提升优先级

在项目的全局样式或组件样式中添加：

.Mui-selected:hover {
  background-color: rgba(224, 224, 224, 0.9) !important;
  /* 颜色值可根据你的设计需求调整，保持与选中状态色调匹配即可 */
}

方案2：使用Material UI的styled组件定制

通过styled组件直接覆盖TableRow的选中hover样式：

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

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  '&.Mui-selected': {
    backgroundColor: theme.palette.action.selected,
    '&:hover': {
      backgroundColor: theme.palette.action.selected,
      // 若需要保留hover的轻微动效，可调整为稍深/稍浅的同色系颜色
    },
  },
}));

之后在表格中使用StyledTableRow替代原生的TableRow即可。

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