更改材料表反应中“动作”的样式答案

【问题标题】：Changing the style of "Actions" in material-table react更改材料表反应中“动作”的样式
【发布时间】：2020-01-17 04:16:49
【问题描述】：

我一直在我的一个项目中使用材料表。

虽然我能够更改用户定义列的样式（字体大小、颜色），但我无法为“操作”列这样做。

我对更改字体大小特别感兴趣。

分页存在同样的问题：我需要更改其字体大小，但似乎没有可用的选项。

请举个例子：

https://material-ui.com/components/tables/#complementary-projects

【问题讨论】：

您确定您的代码与示例相似吗？任何额外的组件？
@Alex 是的只有这个组件，可以看这里的代码：material-table.com/#/docs/features/editable

标签： reactjs material-table

【解决方案1】：

对于分页，你应该覆盖分页组件。issue，documentation

const useStyles = makeStyles({
  root: {
    backgroundColor: "blue",
    color: "green"
  },
  toolbar: {
    backgroundColor: "white"
  },
  caption: {
    color: "red",
    fontSize: "20px"
  },
  selectIcon: {
    color: "green"
  },
  select: {
    color: "green",
    fontSize: "20px"
  },
  actions: {
    color: "blue"
  }
});
...
 <MaterialTable
    .....
    components={{
            Pagination: props => (
              console.log(props),
              (
                <TablePagination
             {props.labelDisplayedRows(row)}</div>}
                  component="div"
                  colSpan={props.colSpan}
                  count={props.count}
                  rowsPerPage={props.rowsPerPage}
                  page={props.page}
                  onChangePage={props.onChangePage}
                  onChangeRowsPerPage={this.onChangeRowsPerPage}
                  classes={{
                    root: classes.root,
                    toolbar: classes.toolbar,
                    caption: classes.caption,
                    selectIcon: classes.selectIcon,
                    select: classes.select,
                    actions: classes.actions
                  }}
                />
              )
            )
          }}

对于“操作”列，我使用了actions 属性

 actions={[
        {
          icon: "save",
          iconProps: { style: { fontSize: "14px", color: "green" } },
          tooltip: "Save User",
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        }
      ]}

看看这个codesandbox，会有所帮助。

【讨论】：

谢谢亚历克斯...我查看了代码框，它符合我的期望。让我试试这个并回复你。
Alex，我在使用 cellStyle 而不是 actionCellStyle 时遇到问题，在代码发送框中它可以工作，但是当我将它复制到我的项目时它不起作用。问题仅与我的代码上的 cellStyle 相关。知道这里有什么问题吗？
@Deep，请附上你的codesendbox链接，我去看看。

【解决方案2】：

如果您想坚持用户定义的主题，请使用来自icon api of material-ui 的道具。

actions={[
    {
      icon: "save",
      iconProps: {  fontSize: "small", color: "primary"  },
      tooltip: "Save User",
      onClick: (event, rowData) => alert("You saved " + rowData.name)
    }
  ]}

【讨论】：