如何用makeStyles修改Material UI表格字体颜色？两类样式API适用场景

你的写法存在两个会直接导致样式不生效的问题：

• 类映射逻辑错误：Table 组件的 classes prop 是类插槽映射对象，并非单个类名字符串。直接将 classes.table 传入 classes，MUI无法识别你要覆盖哪一层的组件样式，自定义规则自然不会被应用。
• 样式优先级不足：即便你把自定义类正确绑定到Table的根节点上，根元素写的 color: 'red' 也会被内部 TableCell 组件自带的默认文字色样式覆盖——MUI的TableCell默认自带独立的颜色规则，选择器优先级高于外层元素的继承样式。

写法1：精准插槽绑定（推荐，样式可控性最高） #

通过MUI暴露的类插槽，将自定义样式直接绑定到对应组件上，完全不需要处理优先级问题：

import { makeStyles, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';

const useStyles = makeStyles({
  tableRoot: {
    minWidth: 650,
  },
  tableCell: {
    fontSize: 20,
    color: 'red',
  }
});

function TableComponent() {
  const classes = useStyles();
  return (
    <TableContainer component={Paper}>
      {/* 根插槽绑定Table的自定义样式 */}
      <Table classes={{ root: classes.tableRoot }}>
        <TableHead>
          <TableRow>
            {/* 单元格插槽绑定文字样式 */}
            <TableCell classes={{ root: classes.tableCell }}>列标题1</TableCell>
            <TableCell classes={{ root: classes.tableCell }}>列标题2</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell classes={{ root: classes.tableCell }}>单元格内容1</TableCell>
            <TableCell classes={{ root: classes.tableCell }}>单元格内容2</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  )
}

写法2：后代选择器批量覆盖（适合大表格，减少重复绑定） #

如果表格内部单元格很多，可以在Table根类下通过后代选择器批量覆盖内部样式，通过双&提升选择器优先级，避免被默认样式覆盖：

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    // 双&提升选择器优先级，匹配所有内部TableCell元素
    '&& .MuiTableCell-root': {
      fontSize: 20,
      color: 'red',
    }
  }
});

function TableComponent() {
  const classes = useStyles();
  return (
    <TableContainer component={Paper}>
      <Table classes={{ root: classes.table }}>
        {/* 内部所有TableCell不需要额外绑定类，样式自动生效 */}
      </Table>
    </TableContainer>
  )
}

两者没有绝对的优劣差，适配的使用场景存在明确区别：

• 优先使用makeStyles的场景：
  • 以函数组件为核心的项目：无需高阶组件包裹，直接调用Hook获取类名，写法更简洁，不会产生多层组件嵌套的调试问题
  • 需要动态关联组件状态的场景：makeStyles的Hook写法可以通过闭包直接读取组件的props、state，实现动态样式逻辑（比如根据用户传入的主题色调整表格文字颜色）
  • 新开发的项目：和MUI v5的styled API迁移路径更顺畅，长期维护成本更低
• 更适合使用withStyles的场景：
  • 类组件开发场景：Hook无法在类组件中直接调用，withStyles作为高阶组件可以将自定义类通过props传入类组件，不需要强制把类组件重写为函数组件
  • 第三方组件样式注入场景：withStyles可以直接包裹导出的第三方组件完成样式定制，不需要修改第三方组件的内部代码
  • 存量老项目维护：如果项目已经基于withStyles搭建了整套样式体系，没必要为了技术栈统一硬做迁移，减少不必要的重构成本

内容的提问来源于stack exchange，提问作者Raphael Müller