Estoy usando el componente Data Grid Pro de Material-UI en mi aplicación React.
Traté de crear una barra de herramientas personalizada para el componente DataGridPro usando los componentes GridToolbarColumnsButton , GridToolbarFilterButton , GridToolbarDensitySelector y GridToolbarExport del mismo paquete con el componente DataGridPro .
También podría usar un solo componente GridToolbar para reemplazar los cuatro componentes anteriores.
Necesito crear el componente de la barra de herramientas personalizada en un archivo de componente separado.
Bifurqué el código para el ejemplo de barra de herramientas personalizada de Material UI aquí https://codesandbox.io/s/wduvx y edité el código (separe la barra de herramientas personalizada en un archivo de componente diferente) aquí https://codesandbox.io/s/data -grid-pro-barra de herramientas-ejemplo-j004m
Ambos códigos funcionan bien, pero cuando creé otro ejemplo desde cero aquí https://codesandbox.io/s/data-grid-pro-toolbar-mine-up6ik , el código produjo un error. Dijo que Material-UI X: Could not find the data grid context (como puede ver en los códigos y el cuadro).
Aquí están las dependencias (en el archivo 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",¿Cuál es el problema y cuál es la solución para este caso?
Importa desde el módulo incorrecto, porque está usando DataGridPro de @mui/x-data-grid-pro :
import { DataGridPro } from "@mui/x-data-grid-pro"; Pero importa los componentes de la cuadrícula en @mui/x-data-grid :
import { GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExport } from "@mui/x-data-grid";Que debería haber sido:
import { GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExport } from "@mui/x-data-grid-pro";