CODEWITHSUNDEEP
reactjsmaterial-ui
Jack Venevankham
Jack Venevankham

Reputation: 167

How can I change a color in a material ui sticky header table?

Without stickyHeader I can change its color, but when I put stickyHeader the color becomes its default as white.

<Table aria-label="customized table" >
<TableHead stickyHeader style={{backgroundColor: "black"  }}>

Upvotes: 2

Views: 5855

Answers (2)

Jun
Jun

Reputation: 91

As shubham Baranwall said,specify the backgroundColor style at not but as follows,

<TableHead stickyHeader={true} >
    <TableCell style={{backgroundColor: "black"}}> HeadColumn1 <TableCell> 
    <TableCell style={{backgroundColor: "black"}}> HeadColumn2 <TableCell> 
    <TableCell style={{backgroundColor: "black"}}> HeadColumn3 <TableCell> 
</TableHead>

Upvotes: 1

bas
bas

Reputation: 15722

Make sure you actually have a row with at least one cell. Otherwise the TableHead has nothing to render

// ...
<TableHead stickyHeader style={{ backgroundColor: 'blue' }}>
  <TableRow>
    <TableCell>Cell Content</TableCell>
    // More cells...
  </TableRow>
</TableHead>
// ...

Upvotes: 2

Related Questions