Material-UI 5数据网格样式不在组件之间隔离

本文介绍了Material-UI 5数据网格样式不在组件之间隔离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚从Material-UIv4升级到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"
  }
}

推荐答案

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

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

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

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

这篇关于Material-UI 5数据网格样式不在组件之间隔离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Select组件