How to change the font color of Material UI table with makeStyles?

0

Issue

I’m trying to change the font color of a MaterialUI Table, but I can’t seem to get it work with makeStyles(). In MUI’s documentation, there is an example where the font color is being altered using withStyles(), but I’d like to know how to do it with makeStyles for learning purposes. Also, I’d like to ask if there are specific cases where it’s advisable to use withStyles() over makeStyles(), or vice versa.

My component is as follows:

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    fontSize: 20,
    color: 'red',
  },

{...}

function TableComponent() {
  return (
    <Table classes={classes.table}>
      {/*table data*/}
    </Table>
  )

}
});

Thank you for your time.

Solution

you need to modify the root style of TableCell component.
You can modify the font color by changing the root element of TableCell as below:

const useStyles = makeStyles({
  root: {
    color: "red"
  }
});
     ///////other parts of your code///////

          <TableCell className={classes.root} align="right"> 
                {row.protein} 
          </TableCell>

But it needs lots of modifications for every TableCell component that has been used in your code. The best way would be customizing TableCell component and creating new component that font color is changed in it. Like below:

const StyledTableCell = withStyles({
  root: {
    color: "red"
  }
})(TableCell);

sandbox

Answered By – ali sasani

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More