Миграция темы между версиями

Основные изменения в системе тем

В MUI версии 5 была существенно переработана система работы с темами по сравнению с MUI версии 4. В MUI v4 темы создавались через функцию createMuiTheme, а кастомизация осуществлялась через объект overrides и props. В версии 5 вместо createMuiTheme используется createTheme, а ключи overrides и props заменены на более универсальные components и defaultProps.

Пример миграции базовой темы:

MUI v4:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
  overrides: {
    MuiButton: {
      root: {
        borderRadius: 8,
      },
    },
  },
  props: {
    MuiButton: {
      disableElevation: true,
    },
  },
});

MUI v5:

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

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
        },
      },
      defaultProps: {
        disableElevation: true,
      },
    },
  },
});

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

overrides → components.[Component].styleOverrides
props → components.[Component].defaultProps
Универсальный формат components позволяет настраивать как стили, так и поведение компонентов в едином объекте.

Работа с палитрой и типографикой

В MUI v5 значительно улучшена поддержка цветовых схем и темной/светлой темы. palette теперь поддерживает mode, который заменяет устаревший способ создания dark/light темы через отдельные объекты.

Пример настройки темы с поддержкой режима:

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#90caf9' },
    secondary: { main: '#f48fb1' },
    background: {
      default: '#121212',
      paper: '#1e1e1e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 700 },
  },
});

Особенности миграции:

type в палитре заменен на mode.
Структура palette.background расширена: теперь есть default и paper.
Поддержка расширенной типографики через объект typography упрощает глобальные настройки шрифтов.

Кастомизация компонентов через `components`

В MUI v5 компонентная кастомизация стала более гибкой. Любой компонент можно настроить через styleOverrides, defaultProps и variants.

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

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            border: '2px dashed #1976d2',
            color: '#1976d2',
          },
        },
      ],
    },
  },
});

Важные моменты:

variants позволяет определять новые визуальные варианты компонента.
styleOverrides влияет на все экземпляры компонента.
defaultProps задаёт значения по умолчанию для всех компонентов.

Миграция кастомных цветов

Если в старой версии использовались кастомные цвета через palette.augmentColor, в MUI v5 подход остался, но рекомендуется использовать новые функции для расширения палитры:

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

const theme = createTheme({
  palette: {
    tertiary: {
      main: '#ff9800',
      contrastText: '#ffffff',
    },
  },
});

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

Пользовательские цвета можно добавлять напрямую в объект palette.
Для использования кастомных цветов с компонентами необходимо расширять интерфейсы TypeScript через declare module '@mui/material/styles'.

Использование адаптивной темы

MUI v5 позволяет создавать темы, изменяющиеся динамически в зависимости от условий. Например, переключение между светлой и тёмной темой:

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

function App() {
  const [mode, setMode] = useState('light');

  const theme = useMemo(() => 
    createTheme({ palette: { mode } }), [mode]
  );

  return (
    <ThemeProvider theme={theme}>
      {/* Компоненты */}
    </ThemeProvider>
  );
}

Примечание:

useMemo предотвращает лишние пересоздания темы.
Изменение mode динамически обновляет все компоненты, использующие тему.