如何使用 makeStyles 更改 Material UI 表格的字体颜色？

【问题标题】：How to change the font color of Material UI table with makeStyles?如何使用 makeStyles 更改 Material UI 表格的字体颜色？
【发布时间】：2021-03-22 20:32:18
【问题描述】：

我正在尝试更改 MaterialUI 表的字体颜色，但我似乎无法使用 makeStyles()。在 MUI 的文档中，有一个使用 withStyles() 更改字体颜色的示例，但出于学习目的，我想知道如何使用 makeStyles 进行更改。另外，我想问一下是否有特定情况建议使用 withStyles() 而不是 makeStyles()，反之亦然。

我的组件如下：

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    fontSize: 20,
    color: 'red',
  },

{...}

function TableComponent() {
  return (
    <Table classes={classes.table}>
      {/*table data*/}
    </Table>
  )

}
});

感谢您的宝贵时间。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你需要修改TableCell组件的根样式。您可以通过更改 TableCell 的根元素来修改字体颜色，如下所示：

const useStyles = makeStyles({
  root: {
    color: "red"
  }
});
     ///////other parts of your code///////

          <TableCell className={classes.root} align="right"> 
                {row.protein} 
          </TableCell>

但它需要对代码中使用的每个TableCell 组件进行大量修改。最好的方法是自定义TableCell 组件并创建新组件，其中字体颜色发生了变化。如下：

const StyledTableCell = withStyles({
  root: {
    color: "red"
  }
})(TableCell);

sandbox

【讨论】：

如果它解决了您的问题，请告诉我
谢谢你，阿里。我试图覆盖 Table 的样式，而不是 TableCell，但是在您的帮助下，我能够修复样式:)