MUI v5表格行鼠标悬停添加蓝色边框的实现方案咨询

• 核心思路：通过自定义表格行（TableRow）的悬停样式实现，推荐使用outline而非border，避免表格边框折叠导致的样式失效问题。
• 方案一：使用styled组件封装TableRow

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

const StyledTableRow = styled(TableRow)(({ theme }: { theme: Theme }) => ({
  '&:hover': {
    // 使用主题色保持风格统一，也可替换为具体蓝色值
    outline: `2px solid ${theme.palette.primary.main}`,
    // 偏移值抵消表格默认间距，让边框完全贴合行
    outlineOffset: -2,
  },
}));

在表格中直接用StyledTableRow替代原生TableRow即可。

• 方案二：直接通过sx属性内联样式

<TableRow
  sx={{
    '&:hover': {
      outline: '2px solid #1976d2', // Material UI默认主蓝色
      outlineOffset: -2,
    },
  }}
>
  {/* 单元格内容 */}
</TableRow>

注意：如果必须使用border，需要先调整表格的border-collapse为separate，并设置单元格的border为透明，否则行边框会被单元格边框遮挡，示例如下：

<Table
  sx={{
    borderCollapse: 'separate',
    borderSpacing: 0,
  }}
>
  <TableRow
    sx={{
      '&:hover': {
        border: '2px solid #1976d2',
      },
      '& td': {
        border: '2px solid transparent',
      },
    }}
  >
    {/* 单元格内容 */}
  </TableRow>
</Table>

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