Material UI (MUI) для React — установка и компоненты

Material UI, или MUI, — React-библиотека компонентов в стиле Material Design. Она подходит для интерфейсов, где нужны готовые кнопки, поля, карточки, диалоги, темы и адаптивная сетка.

Установка

npm install @mui/material @emotion/react @emotion/styled

React и React DOM должны быть уже установлены. В MUI v9 peer dependencies поддерживают React 17, 18 и 19.

Первый экран

import { Button, Container, TextField, Typography } from '@mui/material';

function App() {
  return (
    <Container maxWidth="sm" sx={{ py: 4 }}>
      <Typography variant="h4" gutterBottom>
        Вход
      </Typography>
      <TextField label="Email" fullWidth margin="normal" />
      <TextField label="Пароль" type="password" fullWidth margin="normal" />
      <Button variant="contained" size="large">
        Войти
      </Button>
    </Container>
  );
}

Иконки Material UI

npm install @mui/icons-material

import DeleteIcon from '@mui/icons-material/Delete';
import { IconButton } from '@mui/material';

function DeleteButton() {
  return (
    <IconButton color="error" aria-label="Удалить">
      <DeleteIcon />
    </IconButton>
  );
}

Тема

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: { main: '#2563eb' },
    secondary: { main: '#16a34a' },
  },
});

function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

Когда выбрать MUI

• Нужен быстрый старт с хорошей документацией.
• Команда привыкла к Material Design.
• Нужна гибкая темизация.
• Проект использует React 19 и свежую экосистему.

Мини-проект: карточка профиля

import {
  Avatar,
  Button,
  Card,
  CardActions,
  CardContent,
  Stack,
  Typography,
} from '@mui/material';

function ProfileCard() {
  return (
    <Card sx={{ maxWidth: 360 }}>
      <CardContent>
        <Stack direction="row" spacing={2} alignItems="center">
          <Avatar>A</Avatar>
          <div>
            <Typography variant="h6">Алиса</Typography>
            <Typography color="text.secondary">Frontend developer</Typography>
          </div>
        </Stack>
      </CardContent>
      <CardActions>
        <Button size="small">Профиль</Button>
        <Button size="small">Написать</Button>
      </CardActions>
    </Card>
  );
}

Как работать с Material UI без лишней борьбы со стилями

Material UI хорошо подходит для интерфейсов, где нужен предсказуемый набор компонентов: формы, карточки, диалоги, меню, таблицы, настройки. Особенно если команда не хочет начинать дизайн-систему с нуля.

Если принять базовую логику MUI, библиотека сильно ускоряет сборку интерфейса. Если пытаться полностью спрятать Material Design под нестандартный бренд, времени может уйти больше, чем на собственные компоненты.

sx prop

MUI часто используют через sx prop. Это объект со стилями, который понимает тему. Например, mt: 2 означает margin-top из theme spacing, а color: ‘text.secondary’ берёт цвет из темы.

<Button
  variant="contained"
  sx={{ mt: 2, borderRadius: 2, textTransform: 'none' }}
>
  Сохранить
</Button>

Ошибки новичков

• импортировать слишком много компонентов без понимания bundle;
• пытаться полностью переделать Material Design под другой стиль;
• забывать про ThemeProvider, когда проекту нужна единая тема;
• использовать div вместо готовых layout-компонентов там, где Stack или Container проще.

Сильные стороны MUI

• понятная документация и много примеров;
• готовая темизация через ThemeProvider;
• удобный sx prop для точечной настройки;
• хорошая база для кабинетов, SaaS-интерфейсов и админок.

Где MUI может мешать

Если дизайнер дал очень нестандартный визуальный стиль, MUI придётся сильно переопределять. В таком случае заранее проверьте 2-3 ключевых экрана: кнопки, поля, карточки и модальные окна.

Что собрать для проверки

Сделайте карточку профиля, форму входа и страницу настроек. Если эти три экрана выглядят нормально без борьбы со стилями, библиотека, скорее всего, подходит.