如何通过CustomPagination将MUI X Data Grid分页栏移至左侧

问题 #

使用MUI X Data Grid实现自定义分页以匹配表格设计规范时，自定义分页组件（CustomPagination）的样式被DataGrid根样式覆盖，无法调整其位置。

预期效果 #

解决方案 #

1. 利用DataGrid的sx属性直接覆盖分页容器样式 #

通过DataGrid的sx属性精准定位分页容器类名，强制修改布局样式，这是最直接的处理方式：

<DataGrid
  // 其他原有属性
  components={{ Pagination: CustomPagination }}
  sx={{
    '& .MuiDataGrid-pagination': {
      position: 'relative', // 替换为你需要的定位规则
      margin: '1rem 0',
      justifyContent: 'flex-end', // 调整分页组件的对齐方向
      padding: '0 16px',
    },
  }}
/>

2. 提升自定义样式优先级 #

如果内联sx样式优先级不足，可以通过CSS类选择器结合优先级规则覆盖：

/* 全局样式文件或CSS模块 */
.data-grid-custom-pagination .MuiDataGrid-pagination {
  position: unset !important;
  margin-top: 24px;
  justify-content: space-between;
}

将类名绑定到DataGrid组件：

<DataGrid
  className="data-grid-custom-pagination"
  components={{ Pagination: CustomPagination }}
/>

3. 给自定义分页组件添加独立容器 #

在CustomPagination外层包裹容器组件，设置独立布局样式，脱离DataGrid的样式约束：

import { Box } from '@mui/material';

const CustomPagination = () => (
  <Box sx={{ position: 'relative', mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
    {/* 自定义分页内容 */}
    <Pagination count={10} />
  </Box>
);

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