如何为MUI v4 Table组件设置交替行不同背景色

实现方案 #

你的样式不生效的核心原因是定义的tableRowRoot类没有和TableRow组件绑定，你不需要给每行额外加类名，通过父级样式后代选择即可实现需求，有两种可选方案：

方案1：仅当前页面表格生效（无需修改现有JSX结构） #

直接修改styles.js中table类的样式，通过后代选择器命中所有表格行：

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

export default makeStyles((theme) => ({
  // 你原有其他样式（content、toolbar、title、th等）保留不变
  table: {
    // 原有table的样式保留，新增以下规则
    // 如果不需要表头行参与交替变色，可把选择器改为 '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(odd)'
    '& .MuiTableRow-root:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}));

你现有的JSX中已经给Table组件绑定了classes.table类，修改后直接生效，不需要改动TableRow相关代码。

方案2：全局所有表格生效 #

如果你希望项目内所有TableRow默认都有交替行背景，可以通过MUI主题覆盖实现：
在你的全局主题配置文件中添加以下规则：

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

const theme = createTheme({
  overrides: {
    MuiTableRow: {
      root: {
        '&:nth-of-type(odd)': {
          backgroundColor: theme.palette.action.hover,
        },
      },
    },
  },
});

之后将该主题传入ThemeProvider即可全局生效，不需要修改任何表格相关的业务代码。

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