如何让Material UI Pagination组件实现响应式布局？

因为Material UI的Pagination组件size属性仅接受small、medium（默认）、large三个枚举值，无法直接传入3vw这类CSS单位，所以需要通过以下几种方式实现响应式适配：

方法1：CSS媒体查询覆盖组件样式 #

通过自定义CSS类，针对不同屏幕尺寸调整分页按钮的字体大小、宽高等核心样式，实现细腻的响应式效果：

/* 自定义响应式分页样式 */
.responsive-pagination .MuiPaginationItem-root {
  /* 基础样式 */
  transition: all 0.2s ease;
}

/* 小屏设备（手机） */
@media (max-width: 600px) {
  .responsive-pagination .MuiPaginationItem-root {
    font-size: 0.75rem;
    min-width: 32px;
    height: 32px;
  }
}

/* 中屏设备（平板） */
@media (min-width: 601px) and (max-width: 960px) {
  .responsive-pagination .MuiPaginationItem-root {
    font-size: 0.875rem;
    min-width: 36px;
    height: 36px;
  }
}

/* 大屏设备（桌面） */
@media (min-width: 961px) {
  .responsive-pagination .MuiPaginationItem-root {
    font-size: 1rem;
    min-width: 40px;
    height: 40px;
  }
}

在组件中引入该类：

<Pagination count={10} className="responsive-pagination" />

方法2：用useMediaQuery动态切换官方size值 #

利用Material UI提供的useMediaQuery钩子结合主题断点，根据屏幕尺寸自动切换官方支持的三个size值，实现快速适配：

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Pagination from '@mui/material/Pagination';

function ResponsivePagination() {
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));

  const paginationSize = isSmallScreen ? 'small' : isLargeScreen ? 'large' : 'medium';

  return <Pagination count={10} size={paginationSize} />;
}

方法3：全局主题配置响应式样式 #

如果需要在整个项目中统一使用响应式分页，可以通过自定义Material UI主题，全局覆盖Pagination组件的样式：

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

const customTheme = createTheme({
  components: {
    MuiPagination: {
      styleOverrides: {
        root: ({ theme }) => ({
          '@media (max-width:600px)': {
            '& .MuiPaginationItem-root': {
              fontSize: theme.typography.pxToRem(12),
              minWidth: theme.spacing(4),
              height: theme.spacing(4),
            },
          },
          '@media (min-width:601px) and (max-width:960px)': {
            '& .MuiPaginationItem-root': {
              fontSize: theme.typography.pxToRem(14),
              minWidth: theme.spacing(4.5),
              height: theme.spacing(4.5),
            },
          },
          '@media (min-width:961px)': {
            '& .MuiPaginationItem-root': {
              fontSize: theme.typography.pxToRem(16),
              minWidth: theme.spacing(5),
              height: theme.spacing(5),
            },
          },
        }),
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Pagination count={10} />
    </ThemeProvider>
  );
}

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