Material-UI 中的垂直表

Question

通过垂直表格，我的意思是每行的第一列是标题。像这样：

<table>
    <tr>
        <th>Header 1</th>
        <td>Cell 1</td>
    </tr>
    <tr>
        <th>Header 2</th>
        <td>Cell 2</td>
    </tr>
</table>

问题是，要将 渲染<TableCell />为 a，<th />我们需要将其包装在 内<TableHead />，否则它将渲染为<td />。但<TableHead />也不能放置在内部，<TableRow />因为它呈现为<thead />. 所以下面的代码将不起作用：

<Table>
    <TableRow>
        <TableHead>
            <TableCell>Header 1</TableCell>
        </TableHead>
        <TableCell>Cell 1</TableCell>
    </TableRow>
    <TableRow>
        <TableHead>
            <TableCell>Header 1</TableCell>
        </TableHead>
        <TableCell>Cell 2</TableCell>
    </TableRow>
</Table>

那么，如何使用 Material-UI 实现第一个示例呢？

Answer 1

哦，没关系。

我不太愿意variant在文档中看到该属性。您所需要做的就是将variant的属性设置<TableCell />为head。

<Table>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 1</TableCell>
    </TableRow>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 2</TableCell>
    </TableRow>
</Table>

Answer 2

批准的解决方案将生成以下错误消息：

<tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser

因此，您可能需要添加<tbody>如下标签：

<Table>
  <TableBody>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 1</TableCell>
    </TableRow>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 2</TableCell>
    </TableRow>
  </TableBody>
</Table>