设置border-collapse与border-spacing后表格偶数行下出现异常线条，无法定位问题属性

问题根因 #

你使用border-collapse: separate搭配border-spacing: 0 4px实现行间距时，行与行之间的4px间隙默认会继承<Table>组件的背景色。你没有为<Table>显式设置和外层容器一致的深色背景，间隙透明透出的背景和奇偶行背景叠加，就出现了偶数行下方的异常同色线条。

解决方案 #

你只需要修改表格的样式定义，给表格显式设置和外层容器一致的背景色即可，无需修改其他逻辑：

1. 调整makeStyles定义，接收theme参数，给table新增背景色配置：

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 100,
    width: '100%',
    borderCollapse: 'separate',
    borderSpacing: '0px 4px',
    // 新增行：设置表格背景和外层容器一致，填充间隙颜色
    backgroundColor: theme.palette.background.container,
  },
}));

备选方案 #

如果你不想用border-spacing实现间距，也可以改用行边框方案，修改如下：

1. 移除表格样式里的borderCollapse和borderSpacing配置，改为默认的边框合并模式
2. 在StyledRow的根样式中添加底部边框，模拟行间距：

const StyledRow = withStyles((theme) => ({
  root: {
    fontSize: '14px',
    maxWidth: '60%',
    // 新增行：用底部边框模拟4px行间距，颜色和容器背景一致
    borderBottom: `4px solid ${theme.palette.background.container}`,
    // 原有奇偶行样式保持不变
    '&:nth-of-type(odd)': {
      // ...原有配置
    },
    '&:nth-of-type(even)': {
      // ...原有配置
    },
  },
}))(TableRow);

两种方案都可以彻底消除异常线条，同时保留你需要的行间距效果。

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