Customize MUI Table styles - last-child - css

Question

I am trying to adjust the padding of MUI Table.
last-child gets padding 24px which I want to adjust. I have tried to override the theme and to use classes{{root: classes.xxx}} but am not able to change it.
Below is the code I used for overriding the theme (I have also tried to override MuiTableRow and MuiTableColumn):
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
'& $lastChild': { paddingRight: '5px' },
},
paddingDefault: {
padding: '40px 12px 40px 16px',
},
},
},
});
This is the CSS that I am trying to change (the last cell of each row in the table):
.MuiTableCell-root-511:last-child {
padding-right: 24px;
}
Hope someone can give a helping hand.

Answer 1

Thats the right approach, you just have a few syntax errors in your JSS.
The last child selector should be:
'&:last-child': {}
Here a complete example
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
"&:last-child": {
paddingRight: 5
}
}
}
}
});

Answer 2

For those who don't want to override theme, you can achieve the same result by providing classes object prop as shown here.
const useStyles = makeStyles({
cell: {
'&:last-child': {
paddingRight: 5,
},
},
});
Provide it to your TableCell as usual;
<TableCell className={classes.cell}>
This will override the &:last-child attribute of your cell. I've found this method to be a little more convenient when I'm not changing anything else in the theme.

Answer 3

In MUI v5, you can use the sx prop and select the last TableCell like this:
<Table
sx={{
'& .MuiTableCell-root:last-child': {
bgcolor: 'pink',
},
}}
>
Or if you want to use createTheme() to override globally:
const theme = createTheme({
components: {
MuiTableCell: {
styleOverrides: {
root: {
'&:last-child': {
backgroundColor: 'tomato',
},
},
},
},
},
});
Live Demo