Acabo de actualizar Material-UI v4 a v5 (ahora MUI). Si tengo un componente DataGrid y un componente como un componente Select (un MenuItem también tiene problemas), el componente Select no funcionará correctamente. Algunos estilos adicionales cargados por DataGrid interfieren con él.

El ejemplo que mostraré aquí es que los valores ya no son desplegables, sino que se enumeran horizontalmente, todos juntos. Tenga en cuenta que DataGrid está intencionalmente vacío para esta demostración.

A diferencia de la funcionalidad esperada como esta:

He puesto el código en CodeSandbox

Tenga en cuenta que "@mui/x-data-grid": "^4.0.0" depende de "@material-ui/core": "^4.12.3" . Estaba/estoy incómodo con eso, pero lo tiene listado como una dependencia (a menos que me haya perdido algo en alguna parte).

¿Hay algo que me falta o hay un error en la versión más reciente de DataGrid que estoy usando? Por cierto, toda la funcionalidad de DataGrid en mi aplicación real funciona bien.

Para completar, también incluiré el código aquí:

 import React from "react"; import { render } from "react-dom"; import { DataGrid } from "@mui/x-data-grid"; import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; function App() { return ( <div> <Select> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> {/* with DataGrid, Select will shown options on one line */} {/* comment out DataGrid and the select will work */} <DataGrid rows={[]} columns={[]} /> </div> ); } render(<App />, document.querySelector("#root"));

El archivo package.json es:

 { "name": "mui-datagrid-isolation-issue", "version": "5.0.0", "description": "", "keywords": [], "main": "index.js", "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", "@mui/x-data-grid": "^4.0.0", "@material-ui/core": "^4.12.3", "react": "latest", "react-dom": "latest" } }