Material UI分页表格分页箭头颜色与主题配色不一致问题求助

解决方案 #

你遇到的箭头颜色异常是因为TablePagination组件内置的翻页箭头是独立的IconButton子组件，你之前定义的.foot类的color属性不会自动继承到子按钮上，需要通过嵌套选择器专门覆盖该组件的样式。

首先修改你代码里的useStyles定义，更新foot类的配置：

const useStyles = makeStyles({
  container: {
    maxHeight: 600,
  },
  head: {
    color: "#494949",
    backgroundColor: "#dadfe1",
    fontWeight: "bolder",
    fontSize: "100%",
  },
  foot: {
    color: "#494949",
    backgroundColor: "#dadfe1",
    borderRadius: '0px 0px 20px 20px',
    // 新增以下规则覆盖翻页箭头颜色
    '& .MuiIconButton-root': {
      color: '#494949',
    },
    // 可选：配置禁用状态下的箭头颜色，避免视觉效果过浅
    '& .MuiIconButton-root.Mui-disabled': {
      color: 'rgba(73, 73, 73, 0.38)',
    }
  },
  table: {
    backgroundColor: "#dadfe1",
    borderRadius: '20px',
  },
  tableBody: {
    backgroundColor: "#f7f7f7",
    color: "#494949",
  }
});

修改后保存重新运行即可，翻页箭头会自动适配你设定的#494949配色，和分页栏其他文字样式统一。

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