如何在Material-UI增强表格的row.getRowProps()中添加自定义行样式？

我来帮你搞定这个问题！其实核心就是合并react-table返回的行属性和你的自定义样式，不能直接覆盖row.getRowProps()的内容，因为它已经包含了行选择、排序等必要的属性。下面分步骤给你讲清楚：

1. 用Material-UI的makeStyles定义样式 #

首先导入makeStyles工具，然后定义你需要的行样式（这里修正了你原来的样式，因为TableRow的padding实际是由TableCell控制的）：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customRow: {
    // 给行内所有单元格设置padding
    '& > td': {
      padding: '10px',
    },
    // 行的底部边框
    borderBottom: '1px solid red',
  },
  // 可选：给选中的行加特殊样式
  selectedRow: {
    backgroundColor: '#e0f7fa !important', // 用!important覆盖默认选中样式
  }
});

2. 在组件中使用样式钩子 #

在你的EnhancedTable组件内部，调用useStyles()获取生成的类名：

const EnhancedTable = ({ columns, data, setData, updateMyData, skipPageReset, }) => {
  const classes = useStyles(); // 新增这一行
  // ... 其他原有代码不变

3. 合并行属性与自定义样式 #

在渲染TableRow的时候，把自定义的className通过row.getRowProps()的参数传入——这个方法会自动合并你传入的属性和它自身生成的属性（比如选中行的类名、点击事件等）：

<TableRow 
  {...row.getRowProps({
    className: `${classes.customRow} ${row.isSelected ? classes.selectedRow : ''}`
  })}
>

另一种方式：用Material-UI的classes属性 #

如果你更习惯用Material-UI组件的classes属性（而非直接传className），也可以这么写：

<TableRow 
  {...row.getRowProps()}
  classes={{
    root: classes.customRow, // 行的默认样式
    selected: classes.selectedRow // 行选中时的样式
  }}
/>

关键说明 #

• 为什么你原来的写法不行？因为row.getRowProps()已经返回了TableRow需要的核心属性（比如className、onClick），直接写<TableRow classes="rowStyle">会覆盖这些属性，而且Material-UI的classes属性是对象类型，不是字符串。
• TableRow本身没有padding，它的内边距是由子组件TableCell控制的，所以要改padding的话需要给& > td设置样式。

修改后的完整关键代码片段 #

这里是你EnhancedTable.js中修改后的核心部分：

// 顶部新增导入和样式
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customRow: {
    '& > td': {
      padding: '10px',
    },
    borderBottom: '1px solid red',
  },
  selectedRow: {
    backgroundColor: '#e0f7fa !important',
  }
});

// 组件内部新增classes获取
const EnhancedTable = ({ columns, data, setData, updateMyData, skipPageReset, }) => {
  const classes = useStyles();
  // ... 原有useTable等逻辑不变

  // 渲染TableRow的部分修改
  return (
    <TableContainer>
      {/* ... 其他Toolbar、TableHead等部分不变 */}
      <TableBody>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <TableRow 
                {...row.getRowProps({
                  className: `${classes.customRow} ${row.isSelected ? classes.selectedRow : ''}`
                })}
              >
                {row.cells.map((cell) => {
                  return (
                    <TableCell {...cell.getCellProps()}>
                      {cell.render("Cell")}
                    </TableCell>
                  );
                })}
              </TableRow>
            );
          })}
        </TableBody>
      {/* ... 其他TableFooter等部分不变 */}
    </TableContainer>
  );
};

这样就能完美给你的表格行添加自定义样式啦！

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