In this screenshot example, the padding at the bottom in Material-UI has been increased from 16px to 24px using the CSS rule below:
.MuiCardContent-root:last-child {
padding-bottom: 24px;
}
https://i.sstatic.net/IWaIu.png
I want to revert it back to 16px, which was the original value set by a previous rule. How can I achieve this using either Material-UI API or plain CSS?
I attempted the following code but it only changed the value to 0:
const useStyles = makeStyles(function (theme) {
return {
// ...
cardContent: {
'&:last-child': {
paddingBottom: 'inherit|initial|revert|unset', // (only one at a time, of course...)
},
},
};
});
// ...
<CardContent className={classes.cardContent}>
// ...
While I could manually set it to 16px, I prefer not to go with this option for obvious reasons.