Material UI-是否可以在表分页操作中禁用labelDisplayedRows？

如何解决Material UI-是否可以在表分页操作中禁用labelDisplayedRows？

我正在尝试从Material UI的表中的表分页操作中删除labeldisplayedRows函数。

我只想在页脚中显示下一个/上一个图标。

我可以通过使选项列表为单个数字来禁用选择行数的选项，这样就可以摆脱页脚中的选择菜单，但是我找不到摆脱标签的方法计数器（例如：5之1）。

我已经看到了这个documentation和这个API outline，但是我找不到找到不显示该计数器的方法。

目前，我有：

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles,useTheme } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';

const useStyles1 = makeStyles((theme) => ({
  root: {
    flexShrink: 0,marginLeft: theme.spacing(2.5),},}));

function TablePaginationActions(props) {
  const classes = useStyles1();
  const theme = useTheme();
  const { count,page,rowsPerPage,onChangePage } = props;

  const handleFirstPageButtonClick = (event) => {
    onChangePage(event,0);
  };

  const handleBackButtonClick = (event) => {
    onChangePage(event,page - 1);
  };

  const handleNextButtonClick = (event) => {
    onChangePage(event,page + 1);
  };

  const handleLastPageButtonClick = (event) => {
    onChangePage(event,Math.max(0,Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div className={classes.root}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="first page"
      >
        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
      </IconButton>
      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="prevIoUs page">
        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
      </IconButton>
      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="next page"
      >
        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
      </IconButton>
      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="last page"
      >
        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
      </IconButton>
    </div>
  );
}

TablePaginationActions.propTypes = {
  count: PropTypes.number.isrequired,onChangePage: PropTypes.func.isrequired,page: PropTypes.number.isrequired,};

function createData(number,icon,heading,explanation) {
  return { number,explanation };
}

const rows = [
  createData(1,"sdkfj",'Cupcake 2',305),createData(2,"sdksdfs fj",'Cupcake3',createData(3,"sdksddddfs fj",createData(4,"sdk ff sdfs fj",].sort((a,b) => (a.number < b.number ? -1 : 1));

const useStyles2 = makeStyles({
  table: {
    // minWidth: 500,});

export default function CustomPaginationActionsTable() {
  const classes = useStyles2();
  const [page,setPage] = React.useState(0);
  const [rowsPerPage,setRowsPerPage] = React.useState(1);

//   const emptyRows = rowsPerPage - Math.min(rowsPerPage,rows.length - page * rowsPerPage);

  const handleChangePage = (event,newPage) => {
    setPage(newPage);
  };


  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="The design studio supports research">
        <TableBody>
          {(rowsPerPage > 0
            ? rows.slice(page * rowsPerPage,page * rowsPerPage + rowsPerPage)
            : rows
          ).map((row) => (
            <TableRow key={row.number}>
              <TableCell  align="right">
                {row.icon}
              </TableCell>
              <TableCell component="th" scope="row" style={{ width: "80%" }}>
                {row.heading}
                {row.explanation}
              </TableCell>
              
              
            </TableRow>
          ))}

          
        </TableBody>
        <TableFooter>
          <TableRow>
                <TablePagination
                colSpan={3}
                
                rowsPerPage={rowsPerPage}
                rowsPerPageOptions={[1]} 
                onChangePage={handleChangePage}
                
                ActionsComponent={TablePaginationActions}
                />
          </TableRow>
          </TableFooter>
          </Table>
    </TableContainer>
  );
}

这不会覆盖数据选项（稍后我将尝试找出原因）。现在，我正在尝试找到一种方法来摆脱页脚中的页面计数器。

现在-我渲染一个NaN：

解决方法

可以通过添加样式来尝试使用CSS的一种常见方法。

import './custom.css'

custom.css 文件

.MuiTablePagination-caption { /* Class generated from your code */
  display: none;
}

输出：

Codesandbox演示：https://codesandbox.io/s/intelligent-monad-75y7b

请注意，它仅对用户隐藏了该元素，但该元素仍位于DOM上。您可以通过开发人员工具查看它。

,

只需将 rowsPerPageOptions 设置为单个数组项。库自动隐藏 少于两个的rowsPerPagesOptions。

就你而言

         <TablePagination
            colSpan={3}
            rowsPerPageOptions=[10] //rowPerPageOption takes array parameters
           ...

            />