如何在Material-UI TablePagination中添加元素？

Question

我在我的项目中使用Material-UI表和TablePagination。看起来是这样的：

现在，我希望将分页向左对齐，而不是向右对齐，在左侧，我想添加另一个元素，例如Button。

通过重新设置.spacer元素，我能够将路线向左移动。这是我的代码：

<TableFooter>
      <TableRow>
        <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          colSpan={3}
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          SelectProps={{
            native: false,
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          ActionsComponent={TablePaginationActions}
          classes={{spacer: classes.paginationSpacer}} >
        </TablePagination>
      </TableRow>
</TableFooter>

现在我正在尝试添加另一个元素。我尝试使用action属性：

action="<div>Some text</div>"

但这甚至没有显示出来。尝试使用

component="<td>Some text</td>"

收到以下错误：Warning: validateDOMNesting(...): <<th>Some text</th>> cannot appear as a child of <tr>.与div相同。

然后我尝试了类似的事情：

...
<TableRow>
    <TablePagination
        ...all the props
    >
    </TablePagination>
    <td>Some text</td>
</TableRow>

文字出现了，但完全扰乱了我的整个表格：

<td>是唯一一个甚至显示的元素，因为TableRow会生成<tr>元素。

有什么想法要在其中插入元素吗？

Answer 1

<TableFooter>
    <TableRow>
        <TablePagination
            ...all the props
        >
        </TablePagination>
        <TableCell colSpan={1}>
            <p>Some text</p>
        </TableCell>
    </TableRow>
</TableFooter>

希望这可以为您提供帮助

Answer 2

您需要将TablePagination一起放在表之外。请看演示https://material-ui.com/components/tables/上的3个示例

<div>   
    <Table>
        ...
    </Table>
</div>

<TablePagination
    ...props
>