使用 React 的 MUI DataGrid 布局问题

Question

现在已经尝试让 MUI DataGrid 工作几个小时，但由于某种原因，样式将分页信息放置在表格的顶部，列标题的顶部。 也许这是我正在做的愚蠢的事情。我尝试了一个非常简单的版本来说明我的问题。希望有人可以帮助我。顺便说一句，我使用 MUI 和 DataGrid 的 v5+。 React 是 v17+

import React, { FC } from "react";
import { DataGrid, GridRowModel } from "@mui/x-data-grid";

import { GridColDef } from "@mui/x-data-grid";
export const DataGridTest: FC = () => {
  const paginationSize = 20;

  const columns: GridColDef[] = [
    { field: "username", headerName: "Username", flex: 1, sortable: false, filterable: false },
    { field: "first_name", headerName: "First Name", flex: 1, sortable: false, filterable: false },
    { field: "last_name", headerName: "Last Name", flex: 1, sortable: false, filterable: false },
    { field: "email", headerName: "Email", flex: 1, sortable: false, filterable: false },
    { field: "phone", headerName: "Phone", flex: 1, sortable: false, filterable: false },
  ];

  const rows: GridRowModel[] = [
    {
      id: 1,
      username: "Tony",
      first_name: "Tony",
      last_name: "Ballony",
      email: "Tony@test.com",
      phone: "0754512222",
    },
    {
      id: 2,
      username: "Joe",
      first_name: "Joeseph",
      last_name: "Willson",
      email: "joe@test.com",
      phone: "0754512333",
    },
  ];

  return (
    <div>
      <DataGrid rows={rows} columns={columns} pageSize={paginationSize} />
    </div>
  );
};

输出如下所示。

因此您可以看到应该显示在表格数据下方的分页部分反而位于页面顶部。事实上，应该在数据周围的边框也被移到了顶部。我希望有人可以在这里帮助我。

Answer 1

你必须指定DataGrid的高度，比如：

//// Your code ////

  return (
    <div>
      <DataGrid
          style={{ height: "700px" }}
          rows={rows}
          columns={columns}
          pageSize={paginationSize} />
    </div>
  );
};

您可以使用样式表代替内联样式。这只是一个例子。