ReactJs Styled Components: Set Font Weight of Table Cell

Question

Using React 18, and latest styledcomponents, how do I set the font weight for MUI Table Cell?

This code is getting the right color, but not setting font weight.

const StyledTableCell = styled(TableCell)({
  backgroundColor: "#99D9EA",
  fontWeight: "800",
});

<StyledTableCell>Enrollment Date</StyledTableCell>

Answer 1

Try something like:

const StyledTableCell = styled(TableCell)({
  "& .MuiTableCell-head": {  // or "& .MuiTableCell-root" or "& .MuiTableCell-body" ...
    backgroundColor: "#99D9EA",   
    fontWeight: 800,
  }  
});   

Possible CSS classes are described here: https://mui.com/material-ui/api/table-cell/