CODEWITHSUNDEEP
reactjsmaterial-ui
user8779054
user8779054

Reputation: 183

Issues overriding material UI styles

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?

Upvotes: 3

Views: 5201

Answers (2)

user8779054
user8779054

Reputation: 183

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);

Upvotes: 0

yun_jay
yun_jay

Reputation: 1180

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:

Edit issues-overriding-material-ui-styles#68178594

Upvotes: 3

Related Questions