Css 物料UI-是否可以在表格分页操作中禁用labelDisplayedRows？

我试图从Material UI的表中的表分页操作中去掉labelDisplayedRows函数

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

我可以通过将选项列表设置为单个数字来禁用选择多行的选项，这样就可以从页脚中删除“选择”菜单，但我找不到方法删除显示计数器的标签（例如：1/5）

我已经看到了这个和这个，但我找不到一个方法来要求不要显示那个计数器

目前我有：

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, icon, heading, explanation };
}

const rows = [
  createData(1, "sdkfj", 'Cupcake 2', 305),
  createData(2, "sdksdfs fj",'Cupcake3', 305),
  createData(3, "sdksddddfs fj",'Cupcake3', 305),
  createData(4, "sdk ff sdfs fj",'Cupcake3', 305),
  
].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>
  );
}

从“React”导入React；
从“道具类型”导入道具类型；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableFooter”导入TableFooter；
从“@material ui/core/TablePagination”导入TablePagination；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/FirstPage”导入FirstPageIcon；
从“@material ui/icons/KeyboardArrowLeft”导入键盘arrowleft”；
从“@material ui/icons/KeyboardArrowRight”导入键盘arrowright”；
从“@material ui/icons/LastPage”导入LastPageIcon；
const useStyles1=makeStyles（（主题）=>({
根目录：{
flexShrink:0，
边缘左侧：主题。间距（2.5），
},
}));
功能表分页操作（道具）{
const classes=useStyles1（）；
const theme=useTheme（）；
const{count，page，rowsPerPage，onChangePage}=props；
const handleFirstPageButtonClick=（事件）=>{
onChangePage（事件，0）；
};
const handlebackbutton单击=（事件）=>{
onChangePage（事件，第1页）；
};
const handleNextButtonClick=（事件）=>{
onChangePage（事件，第+1页）；
};
const handleLastPageButtonClick=（事件）=>{
onChangePage（事件，Math.max（0，Math.ceil（count/rowsPerPage）-1）；
};
返回(
{theme.direction==='rtl'？：}
{theme.direction==='rtl'？：}
=Math.ceil（count/rowsPerPage）-1}
aria label=“下一页”
>
{theme.direction==='rtl'？：}
=Math.ceil（count/rowsPerPage）-1}
aria label=“最后一页”
>
{theme.direction==='rtl'？：}
);
}
TablePaginationActions.propTypes={
计数：需要PropTypes.number.isRequired，
onChangePage:PropTypes.func.isRequired，
页码：PropTypes.number.isRequired，
};
函数createData（编号、图标、标题、说明）{
返回{编号、图标、标题、说明}；
}
常量行=[
createData（1，“sdkfj”，“杯形蛋糕2'，305），
createData（2，“sdksdfs fj”，“Cupcake3'，305），
createData（3，“SDKSDDFS fj”，'Cupcake3'，305），
createData（4，“sdk ff sdfs fj”，“Cupcake3'，305），
].排序（（a，b）=>（a.编号{
设置页面（新页面）；
};
返回(
{（rowsPerPage>0）
？行.切片（第页*行页面，第页*行页面+行页面）
：行
).map（（行）=>(
{row.icon}
{行标题}
{行.解释}
))}
);
}

这不会映射到数据选项（稍后我将尝试找出原因）。现在，我正试图找到一种方法，从页脚中去掉页面计数器

现在-我渲染一个NaN：

---

通过包含样式，您可以尝试使用CSS的常用方法之一

import './custom.css'

自定义.css文件

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

输出：

代码沙盒演示：

---

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

只需将

rowsPerPageOptions

设置为单个数组项即可。库自动隐藏 小于两个的RowsPerPages选项

就你而言

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

            />

您不允许使用自定义CSS吗@m4n0我可以从您的屏幕截图中看到，您已经找到了一种摆脱计数器的方法-请您共享代码的链接好吗？当我删除计数器的占位符时，我得到一个NaN错误。我尝试在分页中将LabelDisplayDrows设置为false，但没有成功。我找不到语法来禁用它。嗨-谢谢你分享你的笔记。我认为到你的代码沙盒的链接可能是针对不同的文件。我可以看到css文件，但看不到代码中的表。当我尝试使用这种方法时，我在页脚上得到一个NaN。我在上面的问题中发了帖子。请在代码沙盒中与其中的表共享该文件。谢谢。对不起-当我将css定义为.MuiTablePagination-caption-257时，我可以不显示任何内容。我不知道为什么它在课程结束时增加了257。谢谢，很高兴它成功了。编号可能是因为代码中的索引。我很想了解更多关于索引是什么和做什么的信息。你知道我在哪里可以找到解释这一点的文档吗？我不知道材料用户界面的概念。但通常像257这样的ID是作为唯一标识符通过数据库添加的。我在WordPress中使用的一个示例：