MUI TablePagination分页项垂直未对齐，如何修复？

以下是几种可行的修复方案：

方案一：直接给TablePagination添加对齐样式 #

通过sx属性强制设置垂直对齐，同时匹配DataGrid footer的默认高度，确保元素居中：

return (
  <TablePagination
    component="div"
    count={totalCount}
    page={page}
    onPageChange={handleChangePage}
    rowsPerPage={rowsPerPage}
    rowsPerPageOptions={[5,10,25,50,100]}
    onRowsPerPageChange={handleChangeRowsPerPage}
    sx={{
      display: 'flex',
      alignItems: 'center',
      minHeight: '64px', // 匹配DataGrid footer默认高度
      gap: 2 // 可选，调整元素间的间距
    }}
  />
);

方案二：调整DataGrid footer插槽的容器样式 #

给footer插槽的外层容器设置垂直对齐，确保内部组件在容器内居中：

<DataGrid 
  rows={data}
  columns={columns}
  getRowId={(row)=>row.sysId}
  rowHeight={45}
  pageSizeOptions={[3, 6]}
  slots={{
    footer: () => (
      <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
        <Footer
          page={pageNo-1}
          totalCount={totalCount}
          handleChangePage={handlePageChange}
          rowsPerPage={pageSize}
          handleChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </div>
    ),
  }}
/>

方案三：覆盖TablePagination内部元素的样式 #

如果是内部单个元素（如下拉框、按钮）错位，可以精准覆盖其样式：

import { styled } from '@mui/material/styles';
import TablePagination from '@mui/material/TablePagination';

const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
  '& .MuiTablePagination-selectLabel, & .MuiTablePagination-select, & .MuiTablePagination-displayedRows, & .MuiTablePagination-actions': {
    alignItems: 'center',
    display: 'flex',
    height: '100%',
  },
}));

// 使用StyledTablePagination替代原组件
return (
  <StyledTablePagination
    // 原属性保持不变
    component="div"
    count={totalCount}
    page={page}
    onPageChange={handleChangePage}
    rowsPerPage={rowsPerPage}
    rowsPerPageOptions={[5,10,25,50,100]}
    onRowsPerPageChange={handleChangeRowsPerPage}
  />
);

问题原因 #

DataGrid的footer容器有固定的高度和默认布局规则，而TablePagination内部的下拉选框、文本、分页按钮等元素，默认垂直对齐方式与容器不匹配，从而导致视觉上的错位。

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