<TableRow> styles not applying to <TableCell>

Issue

I want to change fontWeight for every cell under <TableRow>, so applied "fontWeight" on <TableRow> hoping that this style will apply to every cell inside it. But it's not happening.

// demo.js

<TableRow sx={{ fontWeight: "300" }}> {/*  Not applied to table cells under this tag*/}
  <TableCell sx={{ fontWeight: "300" }}> {/* Applying successfully */}
    Dessert (100g serving)
  </TableCell>
  <TableCell align="right">Calories</TableCell>
  <TableCell align="right">Fat&nbsp;(g)</TableCell>
  <TableCell align="right">Carbs&nbsp;(g)</TableCell>
  <TableCell align="right">Protein&nbsp;(g)</TableCell>
</TableRow>

Applying fontWeight for <TableCell> is working, but why is styles applied on <TableRow> not effecting it's children?

CodeSandbox Demo

Solution

Because <th> by default has font-weight: 500. You have to override it. If you want them to inherit, you can do: font-weight: inherit; to TableCell

Children inherit style from parent, only if it does not have that style applied in self

Answered By - Oktay Yuzcan