Первый компонент на MUI

Для начала работы с MUI необходимо установить пакет @mui/material и сопутствующую библиотеку иконок @mui/icons-material. Используется менеджер пакетов npm или yarn:

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

или

yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

MUI требует наличия библиотеки стилизации @emotion/react и @emotion/styled, которые обеспечивают систему темизации и стилизованные компоненты.

После установки компоненты можно импортировать напрямую:

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

Создание первого компонента

В качестве первого компонента часто используют кнопку Button. Она поддерживает несколько свойств для кастомизации:

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

Пример использования:

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

function App() {
  const handleClick = () => {
    console.log('Кнопка нажата');
  };

  return (
    
  );
}

export default App;

В этом примере создается кнопка с синим фоном (primary) и стандартным размером (medium). При нажатии выводится сообщение в консоль.

Система темизации

MUI предоставляет возможность глобальной настройки цветов, типографики и компонентов с помощью темы. Создание темы производится через функцию createTheme:

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

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

Компоненты, обернутые в ThemeProvider, наследуют эту тему:

Ключевые моменты:

  • Цвета и типографика глобально определяются через объект palette и typography.
  • Можно изменять стандартные стили компонентов, такие как Button, через components в теме.
  • Любой компонент внутри ThemeProvider автоматически наследует заданную тему.

Стилизация компонентов

Существует несколько способов стилизации компонентов MUI:

  1. Через проп sx – быстрый способ инлайн-стилей:
  1. С помощью styled – создание отдельного стилизованного компонента:
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)({
  backgroundColor: '#4caf50',
  color: '#fff',
  '&:hover': {
    backgroundColor: '#388e3c',
  },
});

Стили через styled
  1. Через makeStyles (устаревающий подход, оставлен для совместимости с предыдущими версиями).

Использование иконок

MUI предлагает библиотеку готовых иконок. Подключение производится из @mui/icons-material:

import DeleteIcon from '@mui/icons-material/Delete';
import Button from '@mui/material/Button';

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

  • startIcon и endIcon позволяют добавлять иконки перед или после текста кнопки.
  • Иконки интегрируются с темой, поэтому их цвет автоматически меняется при смене color у кнопки.

Организация форм с TextField

TextField – базовый компонент для ввода данных. Основные свойства:

  • label – подпись поля.
  • variant – стиль поля (outlined, filled, standard).
  • type – тип ввода (text, password, number и т.д.).
  • value и onChange – управление состоянием поля.

Пример:

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function Form() {
  const [name, setName] = useState('');

  return (
    

       setName(e.target.value)}
        sx={{ marginBottom: 2 }}
      />
      
    
  );
}

Ключевые моменты:

  • TextField объединяет label, input и helper text.
  • Поддерживаются валидация и отображение ошибок через error и helperText.
  • Поля можно комбинировать с FormControl и FormHelperText для более сложных форм.

Работа с сеткой и компоновкой

MUI предоставляет систему Grid для построения адаптивных макетов. Основные свойства:

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

Пример:

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


  
    Левый блок
  
  
    Правый блок

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

  • Grid использует 12-колоночную систему.
  • Можно легко создавать адаптивные макеты, задавая разные размеры для xs, sm, md и т.д.
  • Paper используется для визуального выделения блоков.

Реактивность и управление состоянием

Все компоненты MUI полностью совместимы с React, поэтому управление состоянием осуществляется через стандартные хуки:

  • useState для локального состояния.
  • useEffect для побочных эффектов.
  • Передача value и onChange для контролируемых компонентов.

Пример с контролируемой кнопкой и текстовым полем:

function ControlledExample() {
  const [text, setText] = useState('');

  return (
    <>
       setText(e.target.value)}
      />
      
    
  );
}

Ключевые моменты:

  • Комбинация MUI и React позволяет строить полностью интерактивные интерфейсы.
  • Состояние можно поднимать выше или использовать глобальные менеджеры состояний для крупных приложений.
Оглавление