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 (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.