material-ui：如何在表格单元格中放置文本？

Question

我已经用谷歌搜索了很多小时以找到解决方案，但在表格单元格中垂直对齐文本似乎非常困难。我很困惑为什么他们使水平对齐变得容易，而垂直对齐却那么困难。

<TableCell colSpan={2} align='center' vertical-align='top' > 
    <Typography  variant="h5" gutterBottom > 
        Task
    </Typography> 
</TableCell>

Answer 1

TableCellmaterial-ui的组件不提供这样的 vertical-align道具，只有align. 要更改垂直对齐方式，TableCell您必须传递一个style道具（或类名），如下所示：

<TableCell colSpan={2} align="center" style={{ verticalAlign: 'top' }} > 
    <Typography  variant="h5" gutterBottom > 
        Task
    </Typography> 
</TableCell>

任何TableCell不知道的道具都会传递给它的子根（th在这种情况下为元素），并且在JSX 中，您可以使用道具style和驼峰对象传递内联样式。