如何调整MUI X Data Grid页脚分页按钮布局（解决垂直排列问题）

可能诱因 #

• 版本不兼容：MUI X Data Grid对@mui/material、@emotion/react等核心依赖的版本匹配要求严格，版本错位会导致内置样式渲染异常
• 全局CSS冲突：项目全局样式中如果强制设置了flex-direction: column，可能会覆盖分页控件的默认水平flex布局
• 缺失全局样式基线：未引入MUI的CssBaseline组件，导致浏览器默认样式干扰MUI组件布局

具体修复方案 #

1. 统一依赖版本 #

打开项目的package.json，确认MUI核心库与MUI X的版本保持一致（建议都使用最新稳定版），执行以下命令更新：

# npm
npm install @mui/material@latest @mui/x-data-grid@latest @emotion/react@latest @emotion/styled@latest
# yarn
yarn add @mui/material@latest @mui/x-data-grid@latest @emotion/react@latest @emotion/styled@latest

2. 排查全局CSS冲突 #

检查项目的全局样式文件（如index.css、App.css），如果存在以下类似规则，立即删除或修改为仅作用于指定元素：

/* 错误示例：全局强制按钮垂直排列 */
button {
  display: flex;
  flex-direction: column;
}
/* 或错误的分页容器样式 */
.MuiPagination-root {
  flex-direction: column;
}

如果无法修改全局样式，可添加针对性的覆盖规则：

/* 恢复DataGrid分页按钮的水平布局 */
.MuiDataGrid-pagination .MuiPaginationItem-root {
  display: inline-flex;
  flex-direction: row;
}

3. 引入MUI全局样式基线 #

在项目根组件（如App.jsx）中引入CssBaseline，它会重置浏览器默认样式，保证MUI组件的布局一致性：

import { CssBaseline } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

function App() {
  return (
    <>
      <CssBaseline />
      {/* 你的DataGrid组件代码 */}
      <DataGrid columns={yourColumns} rows={yourRows} pagination />
    </>
  );
}

4. 自定义分页组件样式 #

如果以上方法无效，直接通过DataGrid的componentsProps强制设置分页容器的flex布局：

import { DataGrid } from '@mui/x-data-grid';

const CustomDataGrid = () => {
  return (
    <DataGrid
      columns={yourColumns}
      rows={yourRows}
      pagination
      componentsProps={{
        pagination: {
          sx: {
            '& .MuiPagination-root': {
              display: 'flex',
              flexDirection: 'row',
              gap: '8px', // 可选：设置按钮间距
            },
          },
        },
      }}
    />
  );
};

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