CODEWITHSUNDEEP
reactjsmaterial-ui
Raphael Müller
Raphael Müller

Reputation: 107

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

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.

Upvotes: 1

Views: 7772

Answers (1)

alisasani
alisasani

Reputation: 2968

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

Upvotes: 2

Related Questions