Material-UI 5 DataGrid 样式在组件之间不是隔离的

Question

我刚刚从 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 文件是：

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

Answer 1

您使用的是@mui/x-data-grid使用 JSS 的 v4，而 MUI 组件则使用使用情感的 v5。旧版本的 JSS 样式覆盖了情感样式，导致意想不到的结果。

要修复此问题，请安装下一个版本 (v5)，@mui/x-data-grid以便它可以与 MUI v5 兼容，并@material-ui/core删除package.json.

npm install @mui/x-data-grid@next

您始终可以查看文档演示中的package.json文件，以了解工作项目的样子。