Changing the style of "Actions" in material-table react

Question

I have been using material-table in one of my projects.

While I am able to change the style ( font-size, color) of the user defined columns, I am not able to do so for the "Actions" column.

I am specially interested in changing the font-size.

Same issue with the pagenation: I need to change its font-size however it seems there is no option available.

Please take an example from :

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

Upsydaisy

Are you sure your code is similar to the example? any additional component? – Copious

@Copious yes only this component, you can see the code here:material-table.com/#/docs/features/editable – Upsydaisy

Answer 1

For pagination, you should override pagination component.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
                  }}
                />
              )
            )
          }}

For for the "Actions" column, I've used actions property

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

have look at this codesandbox,would be helpful.

Copious

Thanks Alex...I had a look at the codesandbox and it is inline with my expectations.Let me try this out and get back to you. – Upsydaisy

Alex, I am having an issue when I use cellStyle instead of actionCellStyle, IN codesendbox it worked but when I copy it to my project it is not working.Issue is only with cellStyle on my code. Any idea what can be wrong here? – Upsydaisy

@Deep, please attach your codesendbox link , I will have look. – Copious

Answer 2

if you want to stick to the user-defined theme then use props from icon api of material-ui.

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

Messing