How can I style Material UI table header?

Question

How can I style Materials' UI table header?

Maybe something like add classes with useStyle.

<TableHead >
            <TableRow >
                <TableCell hover>Dessert (100g serving)</TableCell>
                <TableCell align="right">Calories</TableCell>
                <TableCell align="right">Fat&nbsp;(g)</TableCell>
                <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
</TableHead>

I want to add style to the table header

Answer 1

I personally used "makeStyles" for styling but you can use "withStyles" as well.

Here is the table:

<TableHead >
    <TableRow className={classes.root}>
        <TableCell>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fat&nbsp;(g)</TableCell>
        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
        <TableCell align="right">Protein&nbsp;(g)</TableCell>
    </TableRow>
</TableHead>

Here is the styles:

const useStyles = makeStyles({

    root: {
        "& .MuiTableCell-head": {
            color: "white",
            backgroundColor: "blue"
        },
    }
});

Here is the output:

Answer 2

you can use withStyles and create an custom element with your own style like this. you can check the working scenario

const TableHead = withStyles(theme => ({
  root: {
    backgroundColor: 'orange'
  }
}))(MuiTableHead);

const TableHeaderCell = withStyles(theme => ({
  root: {
    color: 'white'
  }
}))(TableCell);

<TableHead>
  <TableRow>
    <TableHeaderCell>Dessert (100g serving)</TableHeaderCell>
    <TableHeaderCell align="right">Calories</TableHeaderCell>
    <TableHeaderCell align="right">Fat&nbsp;(g)</TableHeaderCell>
    <TableHeaderCell align="right">Carbs&nbsp;(g)</TableHeaderCell>
    <TableHeaderCell align="right">Protein&nbsp;(g)</TableHeaderCell>
  </TableRow>
</TableHead>