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?

The reason why `& .MuiTableCell-root` (`MuiTableCell` without `-root` doesn't exist as a class anywhere) wouldn't have worked is because of the space between the ampersand and `.MuiTableCell-root`. That indicates to target any **descendants** of the cell that have the class `.MuiTableCell-root`, but that class is on the cell itself. If you remove the space, then it means to target cells that have both your custom class (represented by `&`) and `MuiTableCell-root` which should then work. However, as pointed out in yun_jay's answer, this more complicated syntax is unnecessary. — Ryan Cogswell, Jun 29 '21 at 13:20
Thanks for this. I tried removing the space but it didn't work as well. I've added the related codes in for reference. — user8779054, Jun 29 '21 at 14:22
Another issue is that you are using `makeStyles` along with `withStyles`. Those are alternatives to each other -- they are not used together. `makeStyles` is only for use with function components and you appear to be using a class component. Just remove the `makeStyles` call so that `styles` refers to the object you are currently passing in to `makeStyles`. — Ryan Cogswell, Jun 29 '21 at 14:33

yun_jay · Accepted Answer · 2021-06-29T14:33:21.830

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:

Thanks for the clear explanation. Padding none works but i tried to edit the useStyles part it still doesn't update padding to 10px and remains as padding none or default if i exlude padding none. — user8779054, Jun 29 '21 at 14:20

score 0 · Answer 2 · answered Jun 29 '21 at 14:54

Thanks for all the help from the rest. Here's my final updated solution after taking help from the rest.

Mine is a class component so i got another error (Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:)

So i just updated some parts from this other post

How to style components using makeStyles and still have lifecycle methods in Material UI?

const styles = () => ({
  tableCell: {
    padding: '10px',
  },
});

class MeetingsList extends React.Component {
  constructor(props) {
    super(props);
    ....
  }

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

....

export default withStyles(styles)(MeetingsList);

Issues overriding material UI styles

2 Answers2

Live demo: