我刚刚从 Material-UI v4 升级到 v5（现在是 MUI）。如果我有一个DataGrid组件和一个类似Select组件的组件（aMenuItem也有问题），该Select组件将无法正常工作。加载的一些附加样式会DataGrid干扰它。

我将在此处展示的示例是，值不再是下拉列表，而是水平列出，所有这些值都被粉碎在一起。请注意，DataGrid此演示有意为空。

与这样的预期功能相反：

我已将代码放在CodeSandbox 上

请注意，"@mui/x-data-grid": "^4.0.0"它依赖于"@material-ui/core": "^4.12.3". 我对此感到不舒服，但它确实将其列为依赖项（除非我在某处遗漏了某些东西）。

是否有我遗漏的东西，或者DataGrid我正在使用的最新版本中是否存在错误？顺便说一句，DataGrid我实际应用程序中的所有功能都运行良好。

为了完整起见，我还将在此处包含代码：

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"));

package.json 文件是：

{
  "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"
  }
}