<TableRow> 样式不适用于<TableCell>

Question

我想更改<TableRow>下每个单元格的fontWeight，所以应用了"fontWeight"；在<TableRow>上，希望这种风格能应用于其中的每一个单元格。但这并没有发生。

//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>

将fontWeight应用于<TableCell>是有效的，但为什么在<TableRow>上应用的样式不影响它的孩子？

CodeSandbox演示

Answer 1

因为默认情况下<th>具有font-weight: 500您必须覆盖它。如果你想让它们继承，你可以做：font-weight: inherit;到TableCell

子项从父项继承样式，仅当它在自身中没有应用该样式时