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

Question

我在这里实现了 material-ui 库文档中显示的完全相同的代码

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

我正在尝试实现 flex 布局，

我只是做了完全相同的步骤，控制台一直显示错误：

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

请帮忙，不胜感激。

Answer 1

在您链接到的文档示例中，有一个额外的div包装了代码中的内容： <div style={{ height: 400, width: '100%' }}> 。 包括该包装器元素（如控制台警告中所述，它为元素提供了固有高度）消除了控制台错误。 这是您的 stackblitz 的修改版本，没有错误： https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js 。

文档示例中的 400px 高度可以替换为您想要的任何高度——只是不能基于百分比。 如果您希望DataGrid是浏览器的全高，您可以使用100vh而不是100% 。

这是一个例子：

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>
    </>
  );
}

在我的示例中，我包含了CssBaseline组件，以便摆脱<body>元素上的默认 8px 边距——否则使用100vh将导致出现滚动条； 但是，可以使用calc （例如height: "calc(100vh - 16px)" ）以其他方式计算默认边距（或您应用中的自定义边距）。

Answer 2

使用包装器组件，例如 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