Material UI分页组件选中页背景色无法改为灰色问题求助

你需要针对Pagination组件的选中状态按钮单独设置样式，因为MUI会给选中的页码按钮添加Mui-selected类名。修改你的Pagination组件的sx属性即可实现需求：

<Pagination 
  color="standard"
  shape="rounded"
  defaultPage={1}
  count={Math.ceil(exercises.length/exercisesPerPage)}
  page={currentPage}
  onChange={paginate}
  size="large"
  sx={{
    button: {
      color: '#ffffff',
      // 设置选中页的背景色
      '&.Mui-selected': {
        backgroundColor: '#808080', // 灰色，可根据需求调整色值
        color: '#ffffff',
        // 可选：设置hover时的背景色
        '&:hover': {
          backgroundColor: '#666666',
        }
      },
      // 可选：优化未选中按钮的hover效果，适配深色背景
      '&:hover:not(.Mui-selected)': {
        backgroundColor: 'rgba(255,255,255,0.1)',
      }
    }
  }}
/>

关键说明： #

• &.Mui-selected：匹配选中状态的页码按钮，直接覆盖默认背景色
• 可以调整backgroundColor的具体灰度值（比如#737373、#999999），让效果更贴合你的设计需求
• 添加未选中按钮的hover样式是为了在深色背景下保证交互反馈的可见性

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