如何修改React中MUI Pagination组件实现自定义分页显示格式

要实现这种极简分页格式，你需要自定义renderItem函数，过滤默认的多余页码按钮，只保留上一页、当前页/总页数文本、下一页三个元素，同时维护当前页码的状态。

完整实现代码 #

import { useState } from 'react';
import { Pagination, PaginationItem } from '@mui/material';

function CustomPagination() {
  // 维护当前页码状态
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 20;

  // 页码切换逻辑
  const handlePageChange = (_, newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <Pagination
      count={totalPages}
      page={currentPage}
      onChange={handlePageChange}
      // 自定义每个分页项的渲染
      renderItem={(item) => {
        switch (item.type) {
          // 渲染上一页按钮
          case 'previous':
            return <PaginationItem {...item} label="<prev" />;
          // 渲染下一页按钮
          case 'next':
            return <PaginationItem {...item} label="next>" />;
          // 只渲染当前页的页码文本，隐藏其他页码按钮
          case 'page':
            if (item.page === currentPage) {
              return (
                <span style={{ margin: '0 12px', fontSize: '14px', display: 'flex', alignItems: 'center' }}>
                  {currentPage} / {totalPages}
                </span>
              );
            }
            return null;
          // 隐藏首页、末页按钮
          default:
            return null;
        }
      }}
    />
  );
}

export default CustomPagination;

关键说明 #

1. 状态管理：用useState跟踪当前页码，确保页码文本实时更新
2. 过滤多余元素：通过switch判断item.type，对first、last类型和非当前页的page类型直接返回null，不渲染
3. 自定义文本样式：给页码文本添加内联样式，保证和分页按钮对齐，你可以根据需求调整margin、fontSize等样式
4. 按钮自定义：如果需要修改<prev>/next>的样式或文本，可以在PaginationItem中添加sx属性自定义样式，或者替换label内容

样式扩展示例 #

如果需要让按钮更贴合你的设计风格，比如添加边框、圆角：

case 'previous':
  return (
    <PaginationItem
      {...item}
      label="<prev"
      sx={{
        border: '1px solid #e0e0e0',
        borderRadius: '4px',
        '&:hover': { backgroundColor: '#f5f5f5' }
      }}
    />
  );

内容的提问来源于stack exchange，提问作者Sakib Rahman