Material-UI X: 找不到数据网格上下文

Question

我在我的 React 应用程序中使用来自 Material-UI 的 Data Grid Pro 组件。

我尝试使用同一包中的 GridToolbarColumnsButton、GridToolbarFilterButton、GridToolbarDensitySelector 和 GridToolbarExport 组件为 DataGridPro 组件创建自定义工具栏使用 DataGridPro 组件。

我也可以使用一个 GridToolbar 组件来替换上面所有的四个组件。

我需要在单独的组件文件中创建自定义工具栏组件。

我从 Material UI 此处 https://codesandbox.io/s/wduvx 派生了自定义工具栏示例的代码并在此处 https://codesandbox.io/s/data-grid-pro-toolbar-example-j004m

编辑代码（将自定义工具栏分离到不同的组件文件中）

这两个代码都可以正常工作，但是当我在这里 https://codesandbox.io/s/data-grid-pro-toolbar-mine-up6ik 从头开始创建另一个示例时，代码产生了错误。它说 Material-UI X: Could not find the data grid context（如您在代码框中所见）。

以下是依赖项（在 package.json 文件中）：

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid": "^4.0.0",
"@mui/x-data-grid-pro": "^4.0.0",

这个案例有什么问题，解决方案是什么？

Answer 1

您从错误的模块导入，因为您使用的是来自 @mui/x-data-grid-pro:

的 DataGridPro

import { DataGridPro } from "@mui/x-data-grid-pro";

但是你在@mui/x-data-grid中导入网格组件：

import {
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExport
} from "@mui/x-data-grid";

应该是：

import {
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExport
} from "@mui/x-data-grid-pro";

Material-UI X: 找不到数据网格上下文

Material-UI X: Could not find the data grid context

javascript

datagrid

reactjs

material-ui