Сетка MUI: объяснение на реальных примерах: макеты, формы и панели мониторинга

Material UI (MUI) предлагает мощную систему компонентов Grid для создания адаптивных макетов в React. Но поначалу это может сбивать с толку — особенно из-за пересечения между Grid, используемым для макета, и DataGrid, используемым для отображения данных. В этой статье мы рассмотрим, как эффективно использовать систему сеток MUI, с реальными примерами, которые вы можете применить к формам, панелям мониторинга и многому другому.

Что такое MUI Grid?

MUI предоставляет два типа компонентов сетки:

• Grid (Макет) из @mui/material или @mui/system: используется для создания макетов страниц с использованием 12-колоночной системы flexbox.
• 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>

Реальные шаблоны интерфейса

Макет формы

<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 vs 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. Элементы сетки растягиваются неожиданно

• Оберните текст в Box, Paper или аналогичный компонент для контроля ширины/высоты.

Заключение

Система сеток MUI предлагает мощный способ создания адаптивных макетов с использованием простого, гибкого API. Освоив структуру контейнер/элемент, точки перелома и распространенные шаблоны макетов, вы сможете создавать надежные пользовательские интерфейсы без необходимости в пользовательском CSS.

Часто задаваемые вопросы