Material UI Pagination配置主题后无法修改页码颜色解决方法

样式不生效的核心原因有两个：

• Pagination组件传入了color='primary'属性，渲染时只会读取palette中primary相关配置，你设置的secondary色值根本不会被组件调用
• MUI Pagination的未选中页码文字颜色默认读取text.primary调色板变量，不属于primary/secondary主色的覆盖范围，你配置的primary.contrastText仅会作用在当前选中的页码按钮上，无法影响普通页码的文字颜色

根据需求二选一即可：

方案1：全局主题配置（适合全站分页统一样式） #

在createTheme中增加components字段，覆写Pagination子项PaginationItem的默认样式，一次配置全站生效，修改后的完整主题代码如下：

const theme = createTheme({
  palette:{
    primary:{
      main: '#00ADB5',
      contrastText: '#ffffff' // 选中态页码文字设为纯白
    }
  },
  typography:{
    fontFamily:['Poppins'],
    fontSize: 18,
  },
  components: {
    MuiPaginationItem: {
      styleOverrides: {
        root: {
          color: '#ffffff', // 所有普通未选中页码文字设为白色
          '&.Mui-selected': {
            color: '#ffffff' // 兜底选中态样式，避免被默认样式覆盖
          }
        }
      }
    }
  }
})

配置完成后原有组件代码无需任何修改，即可实现所有页码文字为白色的效果。

方案2：单组件局部覆写（适合仅修改当前分页样式的场景） #

无需调整全局主题配置，直接给当前Pagination组件传入sx属性，单独设置该组件下的页码文字颜色即可：

<Pagination 
  onChange={(e) => handleChange(e.target.textContent)} 
  count={numberOfPages} 
  size='large' 
  color='primary' 
  hidePrevButton 
  hideNextButton
  sx={{
    '& .MuiPaginationItem-root': {
      color: '#ffffff'
    }
  }}
/>

额外优化提示：你当前写的onChange取值逻辑存在隐患，点击分页的省略号按钮时，e.target.textContent会拿到...字符串导致页码逻辑出错，建议直接使用组件回调的第二个参数获取正确页码，写法修改为onChange={(_, page) => handleChange(page)}更稳定。

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