Тестирование тем

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

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

Для создания темы используется функция createTheme из пакета @mui/material/styles. Она принимает объект с настройками и возвращает готовый объект темы.

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

const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: {
      fontSize: '2rem',
      fontWeight: 500,
    },
    body1: {
      fontSize: '1rem',
    },
  },
});

Ключевые моменты при настройке темы:

  • palette.mode — определяет светлую (light) или тёмную (dark) тему.
  • palette.primary и palette.secondary — основные цвета приложения.
  • background — задаёт фон для контейнеров и страниц.
  • typography — глобальные настройки шрифтов и размеров текста.

Подключение темы к приложению

Для применения темы используется компонент ThemeProvider. Все дочерние компоненты будут автоматически получать доступ к заданной теме через контекст.

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from './App';

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

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

  • CssBaseline сбрасывает стандартные стили браузера и применяет базовые стили MUI.
  • Тема может быть динамически изменена в зависимости от состояния приложения.

Адаптация к светлой и тёмной теме

MUI предоставляет встроенный механизм для переключения между light и dark режимами. Для динамического изменения темы используют реактивное состояние:

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

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

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

  return (
    <ThemeProvider theme={theme}>
      <Button onCl ick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
        Переключить тему
      </Button>
    </ThemeProvider>
  );
}

Важно:

  • Использование useMemo предотвращает повторное создание темы при каждом рендере.
  • Свойство mode автоматически изменяет оттенки всех стандартных компонентов MUI.

Пользовательские цвета и типографика

Для полного контроля над стилем компонентов можно расширять палитру и типографику:

const theme = createTheme({
  palette: {
    success: {
      main: '#4caf50',
      contrastText: '#fff',
    },
    warning: {
      main: '#ff9800',
      contrastText: '#000',
    },
  },
  typography: {
    button: {
      textTransform: 'none',
      fontWeight: 600,
    },
  },
});
  • Новые цветовые ключи (success, warning) позволяют использовать их в компонентах Button, Alert, Chip.
  • Свойство contrastText гарантирует читаемость текста на цветном фоне.
  • Типографика для кнопок может быть кастомизирована без необходимости писать отдельные CSS-классы.

Переопределение стилей компонентов через тему

MUI поддерживает глобальное переопределение стилей компонентов через components:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '16px',
          padding: '12px 24px',
        },
        containedPrimary: {
          backgroundColor: '#1e88e5',
        },
      },
    },
  },
});

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

  • styleOverrides применяет CSS к определённым компонентам.
  • Можно настраивать разные варианты компонента (contained, outlined, text).
  • Поддерживается использование системных токенов темы (theme.palette.primary.main) для консистентности.

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

Для получения текущей темы внутри компонента применяется хук useTheme:

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

function Example() {
  const theme = useTheme();

  return (
    <Typography style={{ color: theme.palette.primary.main }}>
      Основной цвет темы
    </Typography>
  );
}
  • useTheme возвращает полный объект темы, включая палитру, типографику и настройки компонентов.
  • Позволяет адаптировать индивидуальные стили к текущему режиму (light/dark) и пользовательским цветам.

Создание кастомных цветов с помощью augmentColor

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

import { createTheme, experimental_extendTheme as extendTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    custom: {
      main: '#ff5722',
      contrastText: '#fff',
    },
  },
});
  • После этого новый цвет доступен как theme.palette.custom.main.
  • Компоненты MUI автоматически распознают новый цвет при передаче через color="custom".

Заключение по работе с темами

MUI обеспечивает гибкую и централизованную систему управления стилями через темы. Возможности включают:

  • Переключение между светлой и тёмной схемой.
  • Настройку палитры и типографики.
  • Переопределение стилей компонентов.
  • Создание и интеграцию кастомных цветов.

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

Оглавление