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

Question

我在我的项目中使用带有 TablePagination 的 Material-UI Table。它是这样显示的:

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

希望对你有帮助