如何实现个性化表格分页？如何将MUI组件样式调整为指定效果？

一、核心实现思路 #

你猜的没错，用MUI的Pagination组件处理页码导航，Select组件控制每页显示条数，再配合文本组件展示数据范围，完全可以实现你要的个性化分页效果。核心是维护三个关键状态：当前页码、每页条数、总数据量，状态变化时同步更新表格数据。

二、代码实现示例 #

以下是React函数组件的完整实现片段，包含布局、状态管理和基础样式：

import { useState } from 'react';
import { Pagination, Select, MenuItem, Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

// 自定义分页按钮样式，匹配目标视觉效果
const StyledPagination = styled(Pagination)(({ theme }) => ({
  '& .MuiPaginationItem-root': {
    borderRadius: '4px',
    margin: '0 3px',
    borderColor: theme.palette.grey[300],
  },
  '& .MuiPaginationItem-selected': {
    backgroundColor: theme.palette.primary.main,
    color: '#fff',
    borderColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
    },
  },
}));

function TablePagination() {
  // 核心状态
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const totalCount = 50; // 实际项目中从接口获取总数据量

  // 计算当前显示的数据范围
  const startIndex = (currentPage - 1) * pageSize + 1;
  const endIndex = Math.min(currentPage * pageSize, totalCount);

  // 切换每页条数时重置页码，避免无效页码
  const handlePageSizeChange = (e) => {
    setPageSize(e.target.value);
    setCurrentPage(1);
  };

  return (
    <Box 
      sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        padding: '12px 16px',
        borderTop: '1px solid #eee'
      }}
    >
      {/* 数据范围提示 */}
      <Typography variant="body2" color="text.secondary">
        显示 {startIndex}-{endIndex} 条，共 {totalCount} 条
      </Typography>

      {/* 每页条数选择器 */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Typography variant="body2" color="text.secondary">每页：</Typography>
        <Select
          value={pageSize}
          onChange={handlePageSizeChange}
          size="small"
          sx={{ 
            minWidth: 70,
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: '#eee',
            },
          }}
        >
          <MenuItem value={10}>10条</MenuItem>
          <MenuItem value={20}>20条</MenuItem>
          <MenuItem value={50}>50条</MenuItem>
        </Select>
      </Box>

      {/* 分页导航 */}
      <StyledPagination
        count={Math.ceil(totalCount / pageSize)}
        page={currentPage}
        onChange={(e, newPage) => setCurrentPage(newPage)}
        size="small"
        variant="outlined"
      />
    </Box>
  );
}

export default TablePagination;

三、样式定制技巧 #

1. 布局对齐：通过Box的flex布局属性（justifyContent、alignItems）调整三个模块的位置，完全匹配设计图布局。
2. 组件样式覆盖：用styled组件或者sx属性直接修改Pagination和Select的默认样式，比如调整按钮圆角、选中态背景色、边框颜色等。
3. 细节优化：给整个分页栏添加上边框，和表格分隔开；调整文本颜色为次要文本色，提升视觉层次感。

四、实用注意事项 #

• 异步场景下，页码或每页条数变化时，要重新请求对应页的数据，记得添加加载状态避免用户困惑。
• 总页数计算必须用Math.ceil(totalCount / pageSize)，确保不会出现小数页码。
• 如果需要支持快速跳转，可以额外添加一个输入框，允许用户直接输入页码并跳转。

内容的提问来源于stack exchange，提问作者Diego Mellado