如何向 Material-UI TablePagination 添加元素？答案

【问题标题】：How to add an element to Material-UI TablePagination?如何向 Material-UI TablePagination 添加元素？
【发布时间】：2019-11-16 20:41:43
【问题描述】：

我在我的项目中使用带有 TablePagination 的 Material-UI 表格。它是这样出现的：

现在我希望分页向左对齐而不是向右对齐，并且我想在左侧添加另一个元素，例如 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> 元素。

知道如何在其中插入元素吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

希望对你有帮助

【讨论】：

【解决方案2】：

您需要将 TablePagination 放在 table 之外。请看演示中的 3 示例https://material-ui.com/components/tables/

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

<TablePagination
    ...props
>

【讨论】：