材质 UI 材质表 TablePagination 问题。（反应）

Question

我正在使用material-table. 在TablePagination不工作。它在控制台中引发错误。

我尝试按照文档安装软件包。

https://material-table.com/#/docs/install

npm install material-table --save
npm install @material-ui/core --save

我得到这个错误：

Material-UI：caption提供给 classes 道具的键未在 ForwardRef(TablePagination) 中实现。您只能覆盖以下其中一项：root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions。

警告：失败的道具类型：道具onPageChange在 中标记为必需ForwardRef(TablePagination)，但其值为 undefined。

警告：未知的事件处理程序属性onChangePage。它将被忽略。

警告：未知的事件处理程序属性onChangeRowsPerPage。它将被忽略。

版本：

"@material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",

如果我尝试分页，它会在控制台中引发错误。

未捕获的类型错误：_this.props.onChangePage 不是函数

示例代码：

 <MaterialTable
  icons={tableIcons}
  columns={columns}
  data={editable}
  title="Orders"
  localization={{
    toolbar: {
      searchPlaceholder: 'Filter',
      searchTooltip: 'filters the given text'
    },
    header: {
      actions: 'Actions'
    }
  }}
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) =>
        alert('You saved ' + rowData.name)
    }
  ]}
  options={{
    actionsColumnIndex: -1,
    selection: true,
    exportButton: true,
    showFirstLastPageButtons: true,
    pageSize: 5,
    padding: 'dense',
    pageSizeOptions: [5, 20, 50]
  }}
/>

Answer 1

对我来说，我设法通过删除旧的material-ui模块并安装新的模块来解决这个问题

1. npm 删除材料表
2. npm 安装@material-table/core

然后在代码中替换

import MaterialTable from 'material-table';

和

import MaterialTable from '@material-table/core';

感谢@Chris Livdahl 的回答

Answer 2

我发现材质表存储库没有与最新的材质 UI 更改保持同步。相反，请查看此处的材质表分支： https: //github.com/material-table-core/core，支持 Material UI v4，并正在为 v5 提供“下一个”版本。

更改代码很容易适应新的存储库。请按照此处的说明进行操作：https ://material-table-core.com/docs

Answer 3

我遇到了同样的问题。对我来说，这是由于最新版本的造成@material/core@4.12.1，由于不赞成的方法TablePagination。当material-table使用它而不是升级这些不推荐使用的方法时，它会抛出错误。

我能够降级为解决这一@material-ui/core版本4.11.4，保持material-table版本1.69.3。另一方面，正如@knock-out 所提到的。您可以创建自己的材料表组件。只需更改 -version

希望这是有帮助的！