How can I style Material UI table header?

Question

How can I style Materials' UI table header?

Maybe something like add classes with useStyle.


            
                Dessert (100g serving)
                Calories
                Fat (g)
                Carbs (g)
                Protein (g)

I want to add style to the table header

user_1845830 · Answer

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


  
    Dessert (100g serving)
    Calories
    Fat (g)
    Carbs (g)
    Protein (g)

user_16056064 · Answer

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

Here is the table:


    
        Dessert (100g serving)
        Calories
        Fat (g)
        Carbs (g)
        Protein (g)

Here is the styles:

const useStyles = makeStyles({

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

Here is the output:

Material UI table header color change

user_6324575 · Answer

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.

user_13310223 · Answer

You can create CSS as an object and give it with className:

export function Content() {
    const classes = useStyles();

    return (
        

            
                
                    Dessert (100g serving)
                    Calories
                    Fat (g)
                    Carbs (g)
                    Protein (g)
                
            
    )}

Here is its custom style:

import { makeStyles } from '@material-ui/core/styles'

export const useStyles = makeStyles(() => ({
    table: {
        backgroundColor: 'red'
    }
}))

I do not advise you to style in CSS because Material UI styles may not match with CSS.

user_15011778 · Answer

You can use the sx props in the 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.

user_17552608 · Answer

Add style inside like below:

NOTE:

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

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


            
                Dessert (100g serving)
                Calories
                Fat (g)
                Carbs (g)
                Protein (g)

How can I style Material UI table header?

6 Answers