reactjs - 如何在较小的屏幕上调整 React Material ui 分页间距/宽度

Question

我正在使用 react-material ui 分页组件，其中我有每页行选项以及向前、向后、first_page 和 last_page 选项，如下所示

分页渲染代码：

<TablePagination
        component="div"
        rowsPerPageOptions={[10, 20, 50, 100]}
        colSpan={20}
        count={totalProducts}
        rowsPerPage={rowsPerPage}
        page={page}
        labelRowsPerPage="Rows per page"
        SelectProps={{
          inputProps: { "aria-label": "rows per page" },
          native: true
        }}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
        ActionsComponent={subProps => (
          <Pagination {...subProps} totalProducts={totalProducts} />
        )}
      />

有没有办法在较小的屏幕上，我可以隐藏每页行选项或将分页组件向左移动。基本上使组件响应

谢谢

Answer 1

我认为仅删除每页的行将有助于您的事业。

从rowsPerPageOptions的文档

自定义每页选择字段的行选项。如果可用的选项少于两个，则不会显示选择字段。

所以基本上，如果你通过 rowsPerPageOptions={[]}了就可以了。

您可以使用Hidden在如下所示之间切换。

例子

<>
  <Hidden smUp>
   <TablePagination
     rowsPerPageOptions={[]}
     component="div"
     count={rows.length}
     rowsPerPage={rowsPerPage}
     page={page}
     onChangePage={handleChangePage}
     onChangeRowsPerPage={handleChangeRowsPerPage}
   />
 </Hidden>
 <Hidden smDown>
   <TablePagination
   rowsPerPageOptions={[5, 10, 15, 20]}
   component="div"
   count={rows.length}
   rowsPerPage={rowsPerPage}
   page={page}
   onChangePage={handleChangePage}
   onChangeRowsPerPage={handleChangeRowsPerPage}
  />
 </Hidden>
</>

并且该表已经响应。请让我知道。