How can I style Material UI table header?
10,339
Solution 1
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 (g)</TableHeaderCell>
<TableHeaderCell align="right">Carbs (g)</TableHeaderCell>
<TableHeaderCell align="right">Protein (g)</TableHeaderCell>
</TableRow>
</TableHead>
![CustomHeaderStyle](https://i.stack.imgur.com/5qTGU.png)
Solution 2
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 (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
Here is the styles:
const useStyles = makeStyles({
root: {
"& .MuiTableCell-head": {
color: "white",
backgroundColor: "blue"
},
}
});
Here is the output:
![Eylon Shmilovich](https://lh4.googleusercontent.com/-9mSnS40Zsoc/AAAAAAAAAAI/AAAAAAAASc0/dRzpRWQdT4U/photo.jpg?sz=256)
Author by
Eylon Shmilovich
Updated on August 16, 2022Comments
-
Eylon Shmilovich almost 2 years
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 (g)</TableCell> <TableCell align="right">Carbs (g)</TableCell> <TableCell align="right">Protein (g)</TableCell> </TableRow> </TableHead>
I want to add style to the table header
-
Eylon Shmilovich over 3 yearsThanks for the answer. Already used it, but it won't work! Is there any way of apply style specific for the table header?