MUI粘性表头数据表分页组件文字与图标颜色修改问题

针对黑色背景下MUI分页组件颜色修改无效的问题，核心原因是仅覆盖默认状态样式不足以应对分页组件的选中、悬停、禁用等特殊状态，这些状态有独立的样式优先级，需要针对性覆盖：

方法1：完善makeStyles样式覆盖 #

修改现有makeStyles代码，覆盖所有状态的PaginationItem样式：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  paginationContainer: {
    '& .MuiPaginationItem-root': {
      color: 'white', // 默认状态文字/图标颜色
      '&:hover': {
        color: '#e0e0e0', // 悬停状态颜色
      },
      '&.Mui-selected': {
        color: 'white', // 选中状态颜色
        backgroundColor: 'rgba(255,255,255,0.1)', // 可选：给选中项加浅背景增强辨识度
      },
      '&.Mui-disabled': {
        color: 'rgba(255,255,255,0.5)', // 禁用状态颜色
      }
    },
    // 单独指定箭头图标颜色
    '& .MuiPaginationItem-icon': {
      color: 'white',
    }
  },
});

// 使用时将类名绑定到分页组件的父容器或组件本身
<div className={classes.paginationContainer}>
  {/* 你的MUI表格/分页组件 */}
</div>

方法2：通过ThemeProvider定制主题（全局/局部适配） #

如果需要多个页面统一黑色背景下的组件样式，推荐用主题定制：

import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const darkTableTheme = createTheme({
  palette: {
    mode: 'dark', // 启用暗色模式，MUI组件自动适配深色背景基础样式
  },
  components: {
    MuiPaginationItem: {
      styleOverrides: {
        root: {
          color: 'white',
          '&.Mui-selected': {
            color: 'white',
            backgroundColor: 'rgba(255,255,255,0.15)',
          },
          '&:hover': {
            color: '#f0f0f0',
          }
        }
      }
    }
  }
});

// 在组件外层包裹ThemeProvider
<ThemeProvider theme={darkTableTheme}>
  {/* 你的粘性表头数据表组件 */}
</ThemeProvider>

方法3：用sx属性直接覆盖（MUI v5+） #

如果使用MUI v5，sx属性优先级更高，可直接写在Pagination组件上：

<Pagination
  count={10}
  sx={{
    '& .MuiPaginationItem-root': {
      color: 'white',
      '&.Mui-selected': { color: 'white', backgroundColor: 'rgba(255,255,255,0.1)' },
      '&:hover': { color: '#e0e0e0' },
      '&.Mui-disabled': { color: 'rgba(255,255,255,0.4)' }
    },
    '& .MuiPaginationItem-icon': { color: 'white' }
  }}
/>

额外检查项 #

• 打开浏览器开发者工具查看分页元素的样式，确认是否有其他全局样式或父组件样式优先级更高，覆盖了你的配置；
• 若使用DataGrid内置分页，需在DataGrid的components属性中自定义Pagination组件后再应用上述样式。

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