Issues overriding material UI styles

Question

Issues with overriding this particular padding. I tried to use .MuiTableCell-root but it also didn't update the padding.

Material UI styles from developer tools

.MuiTableCell-root {
    display: table-cell;
    padding: 16px;
}

Styles from my own codes

const styles = makeStyles({
  cell: {
    padding: '10px',
  },
});

Sample table details from class components

render() {
    const { tab, classes } = this.props;
    ....
    return (
      <React.Fragment>
       <TableHead>
        <TableRow>
          <TableCell align="left" className={classes.cell} style={{ width: 250, fontWeight: 'bold' }}>Meeting Date</TableCell>
        </TableRow>
       </TableHead>
      </React.Fragment>
    )
}

....

export default withStyles(styles)(MeetingsList);

When i check that particular cell via developer tools, seems like it doesn't update the padding. It does provide me my component name, so i'm thinking maybe my styles part is wrong?

class="MuiTableCell-root MuiTableCell-head MeetingsList-cell-632 MuiTableCell-alignLeft"

How to override style of nested Material UI component from the ancestors?

Answer 1

For your issue it is enough to set the padding prop to none:

<TableCell
  align="left"
  className={classes.cell}
  padding="none"
  style={{ width: 250, fontWeight: 'bold' }}
>
  Meeting Date
</TableCell>

However, if you simply want to have a different padding than the default, you can change the padding for classes.cell and it will be added.

const useStyles = makeStyles({
  cell: {
    padding: '4px',
  },
});

Another option would be to pass the class on via classes prop. This way you can make specific changes to nested classes that you wouldn't be able to do with the previous method. Which class objects you can pass to classes can always be found in the documentation. Link to TableCell Docs

Your component would then look like this:

const useStyles = makeStyles({
  cell: {
    padding: '0px',
  },
});

...

render() {
  const classes = useStyles();
  return (
    <TableCell
      align="left"
      classes={{
        root: classes.cell,
      }}
      padding="none"
      style={{ width: 250, fontWeight: "bold" }}
    >
      Meeting Date
    </TableCell>
  );
};

...

export default MeetingList;

Live demo: