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

score 11 · Answer 1 · edited Dec 17 '21 at 06:04

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:

Material UI table header color change

score 9 · Answer 2 · answered Oct 22 '20 at 19:39

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>

Angela Tsao · Answer 3 · 2022-05-16T15:08:13.493

5

You can use the sx props in the <TableRow> to style your table header and change the color to yours.

 sx={{
      "& th": {
        color: "rgba(96, 96, 96)",
        backgroundColor: "pink"
      }
    }}

Here's my CodeSandbox sample: https://codesandbox.io/embed/customizedtableheader-nl4bio?fontsize=14&hidenavigation=1&theme=dark

Check more information about sx in here.

edited May 16 '22 at 15:08

answered May 16 '22 at 14:54

Angela Tsao

51
1
2

score 1 · Answer 4 · answered Mar 23 '22 at 10:22

Here's how to style all of your TableHeaders globally by adjusting your theme:

import { createMuiTheme } from "@material-ui/core/styles";

export const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      head: {
        color: "grey",
      }
    }
  },
  palette: {
    primary: {
      ... 
    },
    secondary: {
     ...
    }
  },
});

Note: this is in the MUI v4 format, the v5 format is slightly different. Check the MUI v4 -> v5 migration guide for details.

score -1 · Answer 5 · edited Dec 17 '21 at 05:51

Add style inside <TableHead> like below:

NOTE:

backgroundColor: this is the color of header background
color: this is the color of the font inside the header

<TableHead style={{backgroundColor:'red', color: 'white',}}>

After adding it to your code, it would look like this:

<TableHead style={{backgroundColor:'red', color: 'white',}}>
            <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>

How can I style Material UI table header?

5 Answers5