MUI x-data-grid 文档示例从未按预期工作

Question

I am implementing the exact same code shown in the material-ui library documentation here我在这里实现了 material-ui 库文档中显示的完全相同的代码

https://mui.com/x/react-data-grid/layout/#flex-layout https://mui.com/x/react-data-grid/layout/#flex-layout

I am trying to implement the flex layout,我正在尝试实现 flex 布局，

I just did the exact same steps and the console shows the error all the time:我只是做了完全相同的步骤，控制台一直显示错误：

Sandbox: https://stackblitz.com/edit/react-8ahs3n?file=src/App.js沙盒： https://stackblitz.com/edit/react-8ahs3n?file=src/App.js

Please help, appreciated.请帮忙，不胜感激。

Answer 1

In the documentation example you linked to there is one additional div wrapping what you have in your code: <div style={{ height: 400, width: '100%' }}> .在您链接到的文档示例中，有一个额外的div包装了代码中的内容： <div style={{ height: 400, width: '100%' }}> 。 Including that wrapper element (which gives the element an intrinsic height as mentioned in the console warning) gets rid of the console error.包括该包装器元素（如控制台警告中所述，它为元素提供了固有高度）消除了控制台错误。 Here's a modified version of your stackblitz that does not have the error: https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js .这是您的 stackblitz 的修改版本，没有错误： https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js 。

The 400px height in the documentation example can be replaced by whatever height you want -- it just can't be percent-based.文档示例中的 400px 高度可以替换为您想要的任何高度——只是不能基于百分比。 If you want the DataGrid to be the full height of the browser, you can use 100vh instead of 100% .如果您希望DataGrid是浏览器的全高，您可以使用100vh而不是100% 。

Here's an example:这是一个例子：

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";
import CssBaseline from "@mui/material/CssBaseline";

export default function FlexLayoutGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 50,
    maxColumns: 6
  });

  return (
    <>
      <CssBaseline />
      <div style={{ height: "100vh", width: "100%" }}>
        <div style={{ display: "flex", height: "100%" }}>
          <div style={{ flexGrow: 1 }}>
            <DataGrid {...data} />
          </div>
        </div>
      </div>
    </>
  );
}

In my example I included the CssBaseline component in order to get rid of the default 8px margin on the <body> element -- otherwise using 100vh will cause a scroll bar to appear;在我的示例中，我包含了CssBaseline组件，以便摆脱<body>元素上的默认 8px 边距——否则使用100vh将导致出现滚动条； however the default margin (or a custom margin in your app) can be accounted for in other ways by using calc (eg height: "calc(100vh - 16px)" ).但是，可以使用calc （例如height: "calc(100vh - 16px)" ）以其他方式计算默认边距（或您应用中的自定义边距）。

Answer 2

Use a wrapper component such as Box from Material UI with flex display and height:使用包装器组件，例如 Material UI 中的 Box，具有 flex 显示和高度：

<div style={{ height: 400, width: '100%' }}>
<Box  style={{
    display: "flex",
    height:400,
    justifyContent: "center",
    alignItems: "center"
  }}
>
<Datagrid/>
</Box>
</div>

MUI x-data-grid 文档示例从未按预期工作

问题描述

2 个解决方案

解决方案1
1 2023-01-28 15:37:30

解决方案2
-1 2023-01-28 15:43:44

MUI x-data-grid 文档示例从未按预期工作

问题描述

2 个解决方案

解决方案1 1 2023-01-28 15:37:30

解决方案2 -1 2023-01-28 15:43:44

解决方案1
1 2023-01-28 15:37:30

解决方案2
-1 2023-01-28 15:43:44