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

Question

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

我尝试为DataGridPro组件创建一个自定义工具栏，使用GridToolbarColumnsButton,GridToolbarFilterButton,GridToolbarDensitySelector和GridToolbarExport组件来自与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(正如您在codesandbox中看到的)。

这里是包中的依赖项。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";