Компонентная библиотека

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

Компоненты MUI делятся на несколько категорий:

  • Базовые элементы — кнопки, текстовые поля, чекбоксы, радиокнопки.
  • Компоновочные компоненты — контейнеры, сетки, панели, карточки.
  • Интерактивные элементы — меню, диалоги, всплывающие подсказки, таблицы с сортировкой.
  • Компоненты высшего порядка — обертки для кастомизации и расширения базовых элементов.

Каждый компонент поддерживает систему темизации, что позволяет задавать глобальные цвета, отступы и типографику через объект theme. Это обеспечивает единообразие интерфейса и упрощает масштабирование приложений.

Использование базовых компонентов

Кнопки

Компонент <Button> предоставляет возможность создания интерактивных кнопок с различными стилями:

import Button from '@mui/material/Button';

<Button variant="contained" color="primary">Отправить</Button>
<Button variant="outlined" color="secondary">Отмена</Button>
<Button variant="text">Просто текст</Button>

Ключевые props:

  • variant — тип кнопки (text, outlined, contained).
  • color — цветовая схема (primary, secondary, error, success, warning, info).
  • size — размер (small, medium, large).
  • disabled — отключение кнопки.
  • startIcon / endIcon — добавление иконки слева или справа.

Текстовые поля

Компонент <TextField> объединяет <input> и лейбл с валидацией:

import TextField from '@mui/material/TextField';

<TextField label="Имя" variant="outlined" fullWidth required />
<TextField label="Пароль" type="password" variant="filled" />

Особенности:

  • variant — визуальный стиль (outlined, filled, standard).
  • fullWidth — растягивает поле на всю ширину контейнера.
  • required — добавляет атрибут обязательного заполнения.
  • helperText — отображает подсказку или сообщение об ошибке.
  • Поддержка интеграции с библиотеками для валидации форм (react-hook-form, formik).

Компоновочные компоненты

Grid

Система сетки позволяет строить адаптивные интерфейсы:

import Grid from '@mui/material/Grid';

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>Левый блок</Grid>
  <Grid item xs={12} sm={6}>Правый блок</Grid>
</Grid>

Основные свойства:

  • container — задает контейнер сетки.
  • item — задает отдельный элемент сетки.
  • spacing — расстояние между элементами.
  • xs, sm, md, lg, xl — управление шириной на разных точках перелома.

Box

Компонент <Box> — универсальный контейнер для стилизации и позиционирования:

import Box from '@mui/material/Box';

<Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
  Контент по центру
</Box>

Система sx:

  • Позволяет задавать стили через объект.
  • Поддерживает CSS-свойства, медиа-запросы и системные токены (theme.spacing, theme.palette).
  • Можно комбинировать с классами и стилями через className.

Интерактивные элементы

Меню и диалоги

Компоненты <Menu> и <Dialog> управляют всплывающими элементами интерфейса:

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

<Menu open={open} onCl ose={handleClose}>
  <MenuItem onCl ick={handleClose}>Профиль</MenuItem>
  <MenuItem onCl ick={handleClose}>Выход</MenuItem>
</Menu>
import Dialog from '@mui/material/Dialog';

<Dialog open={open} onCl ose={handleClose}>
  <DialogTitle>Подтвердите действие</DialogTitle>
  <DialogContent>Вы уверены, что хотите удалить элемент?</DialogContent>
</Dialog>

Особенности:

  • Управление открытием через open и событие onClose.
  • Можно кастомизировать содержимое через вложенные компоненты.
  • Поддержка анимации и фокусировки для улучшения UX.

Таблицы

Компонент <Table> позволяет создавать динамические и сортируемые таблицы:

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

<TableContainer component={Paper}>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Имя</TableCell>
        <TableCell>Возраст</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Иван</TableCell>
        <TableCell>30</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Возможности:

  • Сортировка, пагинация и фильтры.
  • Интеграция с компонентами <Checkbox> и <Switch> для интерактивного выбора.
  • Поддержка адаптивного отображения через медиазапросы.

Темизация и стилизация

MUI предоставляет мощные инструменты для кастомизации:

  • ThemeProvider — глобальная обертка для темы приложения:
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>
  • Система sx — стили для отдельных компонентов.
  • Styled API — создание новых компонентов на основе существующих с расширенной стилизацией:
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const MyButton = styled(Button)({
  backgroundColor: '#ff5722',
  '&:hover': { backgroundColor: '#e64a19' },
});
  • CSS Variables и токены позволяют поддерживать единый стиль и легко менять цвета, отступы и размеры шрифтов.

Расширение и кастомизация компонентов

Компоненты MUI легко комбинируются и расширяются через:

  • HOC (Higher-Order Components) — обертки для добавления логики.
  • Композицию — вложенные компоненты для создания сложных UI-элементов.
  • Контроль props — использование component для замены базового HTML-элемента.

Пример замены тега у кнопки:

<Button component="a" href="https://mui.com" target="_blank">
  Перейти на сайт
</Button>

Это позволяет использовать MUI в проектах с разной семантикой и интегрировать библиотеку в сложные приложения без потери гибкости.

MUI обеспечивает полный набор инструментов для создания интерфейсов, от базовых элементов до сложных адаптивных систем. Правильное использование компонентной структуры, темы и стилей позволяет создавать масштабируемые и единообразные приложения на React.

Оглавление