【问题标题】:Material-UI: The key `caption` provided to the classes prop is not implemented in ForwardRef(TablePagination)Material-UI:提供给 classes 道具的键 `caption` 未在 ForwardRef(TablePagination) 中实现
【发布时间】:2021-05-16 13:43:15
【问题描述】:

我在我的组件中添加了简单的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.

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

【问题讨论】:

    标签: reactjs material-ui


    【解决方案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 版本以解决问题。

    【讨论】:

      【解决方案2】:

      在我更新了材料 ui 依赖项后,问题现在消失了。我设法得到 data-gridcore 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",
      

      【讨论】:

      • fwiw,这就是现在的工作:“@material-ui/core”:“5.0.0-beta.5”,“@material-ui/data-grid”:“^4.0 .0-alpha.37", "@material-ui/icons": "5.0.0-beta.5", "@material-ui/lab": "5.0.0-alpha.44", "@material- ui/styles": "5.0.0-beta.5",
      【解决方案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/

      【讨论】:

      • 在我自己的代码中,我不在任何地方使用 caption 或 TablePagination。它可能仅由 DataGrid 使用
      猜你喜欢
      • 1970-01-01
      • 2018-08-02
      • 2018-09-25
      • 2019-11-10
      • 1970-01-01
      • 1970-01-01
      • 2022-07-28
      • 1970-01-01
      相关资源
      最近更新 更多