<tablerow> styles 不適用於<tablecell></tablecell></tablerow>

Question

我想為<TableRow> <TableRow>應用了“fontWeight”，希望這種樣式將應用於其中的每個單元格。 但它沒有發生。

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

為<TableCell>應用fontWeight是有效的，但為什么在<TableRow>上應用 styles 不會影響它的孩子？

CodeSandbox演示

Answer 1

因為<th>默認有font-weight: 500 。 你必須覆蓋它。 如果你想讓它們繼承，你可以這樣做： font-weight: inherit; 到表格單元

子級從父級繼承樣式，前提是它沒有在自身中應用該樣式