Material-UI：提供给 classes 道具的键 `caption` 未在 ForwardRef(TablePagination) 中实现

Question

我在我的组件中添加了简单的DataGrid

<div className='Employees'>
      <Button onClick={queryEmployees}>Employees</Button>
      <DataGrid rows={rows} columns={columns} autoHeight={true}/>
      ...
</div>

我在控制台中收到此错误

Material-UI: The key `caption` provided to the classes prop is not implemented in ForwardRef(TablePagination).
You can only override one of the following:
root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.

我不明白这个错误，也不知道是什么原因导致的，我不知道如何调试它。

Answer 1

我也遇到同样的错误。

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

但我对以下版本没有任何问题。

"@material-ui/core": "^4.11.0",
"material-table": "^1.69.2",
"@material-ui/data-grid": "^4.0.0-alpha.18",

更新：

DataGrid 来自实验室click here 以获取更多信息。

请检查当前可用的文档版本和您的@material/core 版本以解决问题。

Answer 2

在我更新了材料 ui 依赖项后，问题现在消失了。我设法得到 data-grid 与 core v5 一起工作，但我想我必须安装 styles 才能工作。这是我现在安装的，它工作正常。

（注意：你可能不需要所有这些，但我会留在这里，也许它会对某人有所帮助）：

"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.1",
"@material-ui/data-grid": "^4.0.0-alpha.33",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@material-ui/styles": "^4.11.4",

Answer 3

在您的代码中的某处，您在其中一个组件中使用caption 来覆盖其样式。例如，当您传递一个包含组件不支持的额外属性的类列表时，就会发生这种情况。

查看错误，这似乎与 TablePagination 组件有关。

const useStyles = makeStyles(() => {
    root: {},
    caption: { color: "red" },
}
   
const MyComponent = () => {           
   classes = useStyles();
   return <TablePagination classes={classes} {...restProps} />
}

此材质 UI 组件不支持caption。因此，会引发 Typescript 错误。搜索您的代码并删除此附加属性以解决问题。

您可以在此处找到您可以使用的可能属性。 https://material-ui.com/api/table-pagination/