Material-UI X:找不到数据网格上下文
Posted
技术标签:
【中文标题】Material-UI X:找不到数据网格上下文【英文标题】:Material-UI X: Could not find the data grid context 【发布时间】:2021-11-28 03:39:27 【问题描述】:我在我的 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",
这个案例有什么问题和解决方案是什么?
【问题讨论】:
【参考方案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/styles/MuiThemeProvider”的声明文件?
Material-UI 数据网格 onSortModelChange 导致无限循环