MUI Grid 详解与实例：布局、表单和仪表盘

Material UI (MUI) 提供了一个强大的 Grid 组件系统，用于在 React 中构建响应式布局。但初次使用时可能会感到困惑——尤其是在用于布局的 Grid 和用于数据显示的 DataGrid 之间的区别。本文将通过实例讲解如何有效使用 MUI Grid 系统，这些例子可应用于表单、仪表盘等场景。

什么是 MUI Grid？

MUI 提供两种类型的网格组件：

• Grid (布局) 来自 @mui/material 或 @mui/system：用于使用 12 列弹性盒子系统创建页面布局。
• Data Grid 来自 @mui/x-data-grid：用于渲染表格，通常带有分页、排序、过滤等功能。

了解何时使用哪种组件很关键：

• 使用 Grid 控制布局和定位。
• 使用 DataGrid 显示结构化数据，如表格。

MUI Grid 基础布局

容器与项目

MUI Grid 使用 容器 + 项目 模型：

<Grid container spacing={2}>
  <Grid item xs={6}>Left</Grid>
  <Grid item xs={6}>Right</Grid>
</Grid>

列如何工作

网格将宽度分为 12 列。xs={6} 占一半，xs={4} 占三分之一，以此类推。

间距和间隙

在容器上使用 spacing={n} 在项目之间添加一致的内边距。

使用 Grid 创建响应式布局

断点

Grid 支持断点，包括 xs、sm、md、lg、xl。

<Grid item xs={12} sm={6} md={4}>
  Responsive box
</Grid>

这个盒子在小屏幕上占满宽度，在中等屏幕上占一半，在大屏幕上占三分之一。

嵌套网格

通过将一个项目同时设为容器，可以嵌套网格：

<Grid item xs={12}>
  <Grid container spacing={1}>
    <Grid item xs={6}>Nested A</Grid>
    <Grid item xs={6}>Nested B</Grid>
  </Grid>
</Grid>

实际 UI 模式

表单布局

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="First Name" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Last Name" fullWidth />
  </Grid>
</Grid>

仪表盘卡片

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Stats Card</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Chart Area</Paper>
  </Grid>
</Grid>

侧边栏 + 内容

<Grid container>
  <Grid item xs={12} md={3}>
    <Sidebar />
  </Grid>
  <Grid item xs={12} md={9}>
    <MainContent />
  </Grid>
</Grid>

MUI Grid 与 Data Grid 对比

特性 Grid (@mui/material) DataGrid (@mui/x-data-grid) 用途 页面布局 表格数据显示 列数 12列系统 根据数据列定义列 使用场景 表单、仪表盘、布局 表格、电子表格、报表 断点 支持 不支持（通过容器调整大小处理）

DataGrid 使用示例：

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
];

const rows = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

<DataGrid rows={rows} columns={columns} autoHeight />

常见问题及解决方法

1. 溢出或对齐问题

• 始终将项目包装在 container 中。
• 确保 xs、sm 等值的总和为 12（或更少）。

2. 不需要的滚动条

• 使用 spacing={2} 而不是手动设置 margin 或 padding。

3. Grid 项目意外拉伸

• 将文本包装在 Box、Paper 或类似组件中以控制宽度/高度。

结论

MUI 的 Grid 系统提供了一种强大的方式，通过简单、灵活的 API 构建响应式布局。通过掌握容器/项目结构、断点和常见布局模式，您可以构建稳健的 UI，而无需自定义 CSS。

常见问题

MUI 中 Grid 和 Data Grid 有什么区别？

Grid 用于使用 12 列系统进行布局。Data Grid 用于显示表格数据，如表格或电子表格。

MUI Grid 有多少列？

Grid 系统默认使用 12 列。

我可以嵌套 MUI Grid 组件吗？

是的。您可以在项目内嵌套容器，创建复杂布局。