如何让Material UI <Pagination>组件适配暗黑模式？

你遇到的核心问题是混用了Material UI（MUI）基础组件和Joy UI的主题系统——两者的主题、颜色模式机制不互通，所以MUI的<Pagination>识别不了Joy UI的明暗模式切换。

两种解决思路： #

1. 改用Joy UI的Pagination组件（推荐）

Joy UI的组件会自动适配自身主题的颜色模式，直接替换即可：

• 替换导入路径：

// 原Material UI组件导入
// import Pagination from '@mui/material/Pagination';

// 改为Joy UI组件
import Pagination from '@mui/joy/Pagination';

你的现有组件props基本都能兼容，无需大幅修改代码，替换后组件会自动跟随明暗模式切换样式。

2. 手动为Material UI的Pagination适配Joy UI的颜色模式

如果不想替换组件，可以通过useColorScheme获取当前模式，手动自定义样式：

import { useColorScheme } from "@mui/joy/styles";
import Pagination from '@mui/material/Pagination';

// 在组件内部获取当前模式
const { mode } = useColorScheme();

// 渲染Pagination时通过sx自定义适配样式
<Pagination
  count={Math.ceil(blogProps.totalPosts / POSTS_PER_PAGE)}
  page={currentPage}
  onChange={handlePageChange}
  showFirstButton
  showLastButton
  color="primary"
  sx={{
    p: 3,
    mx: "auto",
    // 根据模式调整内部元素的文字和背景色
    '& .MuiPaginationItem-root': {
      color: mode === 'dark' ? '#fff' : '#000',
      backgroundColor: mode === 'dark' ? '#333' : '#fff',
      '&.Mui-selected': {
        backgroundColor: mode === 'dark' ? '#1976d2' : '#1976d2',
      },
      '&:hover': {
        backgroundColor: mode === 'dark' ? '#444' : '#f0f0f0',
      }
    }
  }}
/>

这种方式需要手动覆盖Pagination内部元素的样式，适配成本较高，不如直接改用Joy UI组件高效。

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