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

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

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.

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)
}
]}