Material-UI 5 DataGrid 样式在组件之间不隔离答案

【问题标题】：Material-UI 5 DataGrid styles are not isolated between componentsMaterial-UI 5 DataGrid 样式在组件之间不隔离
【发布时间】：2021-11-17 09:24:38
【问题描述】：

我刚刚从 Material-UI v4 升级到 v5（现在是 MUI）。如果我有一个DataGrid 组件和一个类似Select 的组件（MenuItem 也有问题），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"
  }
}

【问题讨论】：

谢谢@NearlHuscarl！这行得通。让我感到困惑的是，当他们刚刚将打包的东西从 material-ui 重命名为 mui/material 时，他们也为旧版本这样做了。

标签： reactjs material-ui

【解决方案1】：

您正在使用 v4 @mui/x-data-grid，它使用 JSS，而 MUI 组件在使用情感的 v5 中。旧版overrides的JSS样式@导致意外结果的情感样式。

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

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

您可以随时查看docs 演示中的package.json 文件，了解工作项目的外观。

【讨论】：

谢谢！！这终于解决了我的问题

【解决方案2】：

感谢您的回答@NearHuscarl。我没有评论的声誉。我花了一段时间才弄清楚这一点，因为MUI Data Grid Component demo page 的文档仍然指向npm install @mui/x-data-grid，这导致为 MUI5 安装了错误的包。

【讨论】：

安装指南here现在指向下一个版本。