How to apply css on table header of Material ui Table stickyHeader?

Question

I am using Material UI table with stickyHeader prop as i want my table header to be fixed. But then other css is not applying on the header part.

const useStyles = makeStyles((theme) => ({
    tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
  },
}))


const CustomTable = () => {
return(
<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>
)
}

When I am removing "stickyHeader" props. I am getting blue border at the bottom of header but not in case of stickyHeader.

Rajiv Rajiv · Accepted Answer · 2021-02-03T17:06:13

by adding the props stickyHeader a class gets added which sets the border-collapse:separate. this needs to be removed for the header border to be visible.
Target the stickyHeader Mui class from Table.

<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader classes={{stickyHeader:classes.stickyHeader}} aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>

const useStyles = makeStyles((theme) => ({
    tableHead: {
        borderBottomStyle: "solid",
        borderBottomColor: "blue"
    },
    stickyHeader:{
        borderCollapse:'collapse'
    }
}));

Update

To make the border to be fixed, there's a workaround is that just add a borderBottom in the TableCell of the TableHead.

<Table stickyHeader aria-label="simple table">
    <TableHead>
        <TableRow>
            <TableCell
                style={{
                    borderBottom: "5px solid blue"
                }}
            >
                Hii
            </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {//Tablebody items}
    </TableBody>
</Table>

Working demo:

How to apply css on table header of Material ui Table stickyHeader?

1 Answers

Update