如何在Material-UI的TablePagination中根据loading状态禁用分页箭头

方案1：通过插槽属性直接控制按钮状态（推荐） #

Material-UI的TablePagination组件内置了分页按钮的插槽配置，你可以直接给四个分页操作按钮统一绑定disabled属性，关联你的loading状态即可，不需要额外自定义组件。

MUI v5 写法示例： #

import TablePagination from '@mui/material/TablePagination';
// 组件内使用
<TablePagination
  // 你原本的其他配置：count、page、rowsPerPage、onPageChange等
  slotProps={{
    actions: {
      firstPageButtonProps: { disabled: loading },
      lastPageButtonProps: { disabled: loading },
      nextPageButtonProps: { disabled: loading },
      previousPageButtonProps: { disabled: loading },
    },
    select: { disabled: loading }, // 可选配置：需要同时禁用每页条数选择框时添加
  }}
/>

MUI v4 写法示例： #

<TablePagination
  // 原有其他配置
  SelectProps={{ disabled: loading }} // 禁用每页条数选择
  componentsProps={{
    actions: {
      backIconButtonProps: { disabled: loading },
      nextIconButtonProps: { disabled: loading },
      firstPageIconButtonProps: { disabled: loading },
      lastPageIconButtonProps: { disabled: loading },
    }
  }}
/>

方案2：CSS样式快速实现 #

如果不需要精细化控制，也可以通过添加类名配合CSS实现禁用效果，逻辑更简单：

<TablePagination
  className={loading ? 'pagination-disabled' : ''}
  // 其他原有配置
/>

对应CSS代码：

/* 禁用分页箭头按钮 */
.pagination-disabled .MuiTablePagination-actions button {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}
/* 可选：同时禁用每页条数选择框 */
.pagination-disabled .MuiTablePagination-select {
  pointer-events: none;
  opacity: 0.6;
}

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