时间戳

首页 > 解决方案 > 如何使用 makeStyles 更改 Material UI 表格的字体颜色？

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

问题描述

我正在尝试更改 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>
  )

}
});

感谢您的时间。

标签： reactjsmaterial-ui

解决方案

您需要修改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);

沙盒

推荐阅读