时间戳

首页 > 解决方案 > material-ui: How to top the text in tablecell?

material-ui - material-ui: How to top the text in tablecell?

问题描述

I have googled for many hours to find a solution, but it seems to be very difficult to vertically align text within a tablecell. I am confused as to why they make the horizontal alignment easy, while the vertical alignment is that difficult.

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

标签： material-ui

解决方案

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

推荐阅读