ThemeProvider и вложенные темы

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

Основы ThemeProvider

ThemeProvider импортируется из пакета @mui/material/styles и оборачивает компоненты, которым требуется доступ к теме:

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}

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

Создание и настройка темы

MUI предоставляет функцию createTheme, которая принимает объект с настройками темы. Основные разделы:

  • palette — определяет цвета для приложения: primary, secondary, error, warning, info, success.
  • typography — задаёт шрифты, размеры текста, высоту строк.
  • spacing — функция для единообразного задания отступов и размеров.
  • shape — скругление углов компонентов.
  • components — глобальная настройка стилей отдельных компонентов.

Пример расширенной темы:

const theme = createTheme({
  palette: {
    primary: { main: '#556cd6' },
    secondary: { main: '#19857b' },
    background: { default: '#f5f5f5' },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 700 },
    body1: { fontSize: '1rem' },
  },
  shape: { borderRadius: 8 },
  spacing: 4,
  components: {
    MuiButton: {
      styleOverrides: {
        root: { textTransform: 'none' },
      },
    },
  },
});

Вложенные темы

MUI поддерживает вложенные ThemeProvider, что позволяет переопределять настройки темы только для определённого участка приложения:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

function Section() {
  return (
    
      
    
  );
}

function App() {
  return (
    
      
      

    
  );
}

В этом примере верхний ThemeProvider задаёт светлую тему для всего приложения, а вложенный ThemeProvider в компоненте Section переключает режим на тёмный только для кнопки внутри этого компонента.

Особенности вложенных тем:

  • Вложенная тема наследует значения родительской темы, если они не переопределены.
  • Можно динамически менять тему для отдельных блоков, сохраняя глобальные настройки для остальной части приложения.
  • Вложенные темы особенно полезны для диалогов, модальных окон, отдельных страниц или виджетов с отличающимся стилем.

Функция deepmerge для комбинирования тем

Для создания вложенной темы без потери родительских значений используется функция deepmerge, встроенная в MUI:

import { deepmerge } from '@mui/utils';

const customSectionTheme = deepmerge(theme, {
  palette: {
    primary: { main: '#ff5722' },
  },
});

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

Доступ к теме внутри компонентов

Вложенные темы доступны через хук useTheme или через styled API:

import { useTheme, styled } from '@mui/material/styles';

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.getContrastText(theme.palette.primary.main),
}));

function Component() {
  const theme = useTheme();
  console.log(theme.palette.primary.main);
  return Styled Button;
}

Таким образом, компоненты автоматически получают актуальную тему, даже если она была переопределена в вложенном ThemeProvider.

Практические рекомендации

  • Использовать глобальный ThemeProvider на уровне корня приложения.
  • Вложенные ThemeProvider применять для отдельных областей с отличающимся дизайном.
  • Для переопределения отдельных параметров темы использовать deepmerge, чтобы не терять базовые стили.
  • Настройку компонентов через раздел components темы использовать для единообразия стилей кнопок, текстовых полей и других элементов интерфейса.

Поддержка динамических тем

MUI позволяет динамически менять тему в приложении:

const [mode, setMode] = React.useState('light');

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

Это особенно удобно для реализации тёмного и светлого режима с плавным изменением стилей всего интерфейса.

Оглавление