Создание собственной темы

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

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

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

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

  • Palette – определяет цветовую палитру приложения, включая primary, secondary, error, warning, info, success.
  • Typography – задаёт шрифты, размеры, толщину и стили заголовков и текстов.
  • Spacing – позволяет задать базовый интервал для отступов (theme.spacing(1)).
  • Components – конфигурация стилей конкретных компонентов через overrides.

Настройка цветовой палитры

Цветовая палитра разделяется на основные категории: primary, secondary, error, warning, info, success и background. Каждый цвет можно задавать полностью или частично, определяя main, light и dark оттенки.

const theme = createTheme({
  palette: {
    primary: {
      light: '#63a4ff',
      main: '#1976d2',
      dark: '#004ba0',
      contrastText: '#ffffff',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
});

Использование contrastText обеспечивает автоматическое определение цвета текста на фоне основного цвета, что упрощает поддержание доступности интерфейса.

Типографика и шрифты

Типографика в MUI позволяет настраивать шрифты для разных уровней заголовков (h1–h6), параграфов (body1, body2), кнопок (button) и других элементов. Кроме стандартных настроек, можно задавать кастомные размеры, межстрочные интервалы и трансформации текста.

const theme = createTheme({
  typography: {
    fontFamily: 'Arial, sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 700, letterSpacing: '-0.02em' },
    body1: { fontSize: '1rem', lineHeight: 1.6 },
    button: { textTransform: 'none', fontWeight: 600 },
  },
});

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

Настройка компонентов через overrides

MUI предоставляет возможность глобальной настройки стилей компонентов, чтобы унифицировать внешний вид без необходимости применять sx или inline-стили в каждом компоненте. Для этого используется ключ components в createTheme.

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          padding: '8px 20px',
        },
        containedPrimary: {
          boxShadow: 'none',
          '&:hover': {
            backgroundColor: '#115293',
          },
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: '#333333',
        },
      },
    },
  },
});

Преимущества approach:

  • Единая точка настройки внешнего вида.
  • Упрощение поддержки и масштабирования интерфейса.
  • Возможность переопределять стандартные темы компонентов MUI без дублирования кода.

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

MUI позволяет создавать кастомные палитры цветов и тени для компонентов, которые затем можно использовать в приложении через theme.palette и theme.shadows.

const theme = createTheme({
  palette: {
    custom: {
      light: '#ffe0b2',
      main: '#ff9800',
      dark: '#ef6c00',
      contrastText: '#000000',
    },
  },
  shadows: [
    'none',
    '0px 1px 3px rgba(0,0,0,0.2)',
    '0px 1px 5px rgba(0,0,0,0.2)',
    '0px 1px 8px rgba(0,0,0,0.3)',
    // можно добавить свои тени
  ],
});

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

Для реализации тёмной и светлой темы используется параметр mode в palette. Это позволяет быстро переключать оформление приложения без изменения каждого компонента.

const lightTheme = createTheme({
  palette: {
    mode: 'light',
    primary: { main: '#1976d2' },
  },
});

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#90caf9' },
  },
});

Динамическая смена темы может быть связана с состоянием React через ThemeProvider:

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

<ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
  <App />
</ThemeProvider>

Расширение темы через типизацию TypeScript

Для TypeScript можно расширять тему, добавляя кастомные свойства в объект темы. Это позволяет использовать собственные палитры, размеры и настройки без ошибок компиляции.

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

declare module '@mui/material/styles' {
  interface Theme {
    customShadows: {
      widget: string;
    };
  }
  interface ThemeOptions {
    customShadows?: {
      widget?: string;
    };
  }
}

const theme = createTheme({
  customShadows: {
    widget: '0px 4px 20px rgba(0,0,0,0.1)',
  },
});

Это позволяет безопасно использовать theme.customShadows.widget в sx и стилях компонентов.

Заключение по использованию темы

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

Оглавление