如何调整MUI Table Pagination组件样式：将Rows Per Page移至左侧

以下几种方法可以实现需求，根据你的场景选择：

方法一：通过自定义主题覆盖样式 #

之前覆盖主题未成功，大概率是样式路径或优先级问题，正确的主题配置如下：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import TablePagination from '@mui/material/TablePagination';

const customTheme = createTheme({
  components: {
    MuiTablePagination: {
      styleOverrides: {
        toolbar: {
          // 调整toolbar内元素的排列顺序
          '& .MuiTablePagination-selectLabel, & .MuiTablePagination-select, & .MuiTablePagination-selectIcon': {
            order: -1, // 把Rows Per Page区域移到最左侧
            marginRight: 2,
          },
          '& .MuiTablePagination-displayedRows': {
            marginRight: 'auto', // 让显示范围的文本占据中间空间
          },
        },
      },
    },
  },
});

// 使用组件时包裹在自定义主题中
<ThemeProvider theme={customTheme}>
  <TablePagination
    component="div"
    count={customers.length}
    page={page}
    onPageChange={handleChangePage}
    rowsPerPage={rowsPerPage}
    rowsPerPageOptions={[10, 20, 30, 40, 50]}
    onRowsPerPageChange={handleChangeRowsPerPage}
  />
</ThemeProvider>

方法二：直接通过sx属性自定义样式 #

如果不想修改全局主题，可以直接在TablePagination组件上用sx属性局部调整样式：

<TablePagination
  component="div"
  count={customers.length}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  rowsPerPageOptions={[10, 20, 30, 40, 50]}
  onRowsPerPageChange={handleChangeRowsPerPage}
  sx={{
    '& .MuiTablePagination-toolbar': {
      '& .MuiTablePagination-selectLabel, & .MuiTablePagination-select, & .MuiTablePagination-selectIcon': {
        order: -1,
        marginRight: 2,
      },
      '& .MuiTablePagination-displayedRows': {
        marginRight: 'auto',
      },
    },
  }}
/>

方法三：自定义Toolbar组件（最灵活） #

如果需要更自由的布局控制，可以通过ToolbarComponent属性完全自定义分页栏的结构：

import TablePagination from '@mui/material/TablePagination';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import LastPageIcon from '@mui/icons-material/LastPage';

const CustomPaginationToolbar = (props) => {
  const { count, page, rowsPerPage, onPageChange, onRowsPerPageChange, rowsPerPageOptions } = props;

  const goToFirstPage = (e) => onPageChange(e, 0);
  const goToPrevPage = (e) => onPageChange(e, page - 1);
  const goToNextPage = (e) => onPageChange(e, page + 1);
  const goToLastPage = (e) => onPageChange(e, Math.max(0, Math.ceil(count / rowsPerPage) - 1));

  const canGoPrev = page > 0;
  const canGoNext = page < Math.ceil(count / rowsPerPage) - 1;

  return (
    <Toolbar>
      {/* 左侧放置Rows Per Page选择器 */}
      <Typography variant="body2" sx={{ mr: 2 }}>每页行数:</Typography>
      <Select
        value={rowsPerPage}
        onChange={onRowsPerPageChange}
        inputProps={{ 'aria-label': '每页行数' }}
        sx={{ mr: 2 }}
      >
        {rowsPerPageOptions.map(opt => (
          <MenuItem key={opt} value={opt}>{opt}</MenuItem>
        ))}
      </Select>

      {/* 中间显示数据范围 */}
      <Typography variant="body2" sx={{ flex: 1 }}>
        显示第 {page * rowsPerPage + 1} 到 {Math.min((page + 1) * rowsPerPage, count)} 条，共 {count} 条
      </Typography>

      {/* 右侧分页按钮 */}
      <IconButton onClick={goToFirstPage} disabled={!canGoPrev} aria-label="第一页">
        <FirstPageIcon />
      </IconButton>
      <IconButton onClick={goToPrevPage} disabled={!canGoPrev} aria-label="上一页">
        <KeyboardArrowLeft />
      </IconButton>
      <IconButton onClick={goToNextPage} disabled={!canGoNext} aria-label="下一页">
        <KeyboardArrowRight />
      </IconButton>
      <IconButton onClick={goToLastPage} disabled={!canGoNext} aria-label="最后一页">
        <LastPageIcon />
      </IconButton>
    </Toolbar>
  );
};

// 使用自定义Toolbar
<TablePagination
  component="div"
  count={customers.length}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  rowsPerPageOptions={[10, 20, 30, 40, 50]}
  onRowsPerPageChange={handleChangeRowsPerPage}
  ToolbarComponent={CustomPaginationToolbar}
/>

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