Глобальные стили через GlobalStyles

Библиотека MUI предоставляет мощный инструмент для управления глобальными стилями в приложении через компонент GlobalStyles. Этот компонент позволяет задавать CSS-правила, которые будут применяться ко всему приложению, без необходимости прописывать их в отдельных CSS-файлах или использовать сторонние библиотеки.

Импорт и базовое использование

Для начала необходимо импортировать GlobalStyles из пакета MUI:

import { GlobalStyles } from '@mui/material';

Компонент принимает объект styles, который может быть написан в виде обычного объекта JavaScript, где ключи — это CSS-селекторы, а значения — стили:

<GlobalStyles
  styles={{
    body: {
      margin: 0,
      padding: 0,
      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
      backgroundColor: '#f5f5f5',
    },
    a: {
      textDecoration: 'none',
      color: 'inherit',
    },
  }}
/>

В этом примере:

  • body задаёт базовые стили для всей страницы: обнуление отступов и установка шрифта.
  • a убирает стандартное подчеркивание ссылок и наследует цвет от родителя.

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

GlobalStyles полностью интегрируется с системой тем MUI. Это позволяет использовать переменные темы и поддерживать единый стиль во всём приложении:

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

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

  return (
    <GlobalStyles
      styles={{
        body: {
          backgroundColor: theme.palette.background.default,
          color: theme.palette.text.primary,
          fontFamily: theme.typography.fontFamily,
        },
        h1: {
          fontWeight: theme.typography.fontWeightBold,
        },
      }}
    />
  );
}

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

Псевдоклассы и медиазапросы

GlobalStyles поддерживает работу с псевдоклассами и медиазапросами так же, как обычные стили CSS-in-JS:

<GlobalStyles
  styles={{
    button: {
      cursor: 'pointer',
      '&:hover': {
        backgroundColor: '#1976d2',
        color: '#fff',
      },
    },
    '@media (max-width:600px)': {
      body: {
        fontSize: '14px',
      },
    },
  }}
/>

В этом примере:

  • Псевдокласс &:hover применяется к кнопкам при наведении.
  • Медиазапрос уменьшает размер шрифта на устройствах с шириной экрана меньше 600px.

Переопределение стилей MUI компонентов

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

<GlobalStyles
  styles={{
    '.MuiButton-root': {
      borderRadius: '12px',
      textTransform: 'none',
    },
    '.MuiPaper-elevation1': {
      boxShadow: '0px 4px 12px rgba(0,0,0,0.08)',
    },
  }}
/>

Здесь:

  • Все кнопки получают скругленные углы и отмену автоматического приведения текста к верхнему регистру.
  • Карточки (Paper) с elevation={1} получают кастомную тень.

Преимущества использования GlobalStyles

  1. Централизация стилей: все базовые CSS-правила находятся в одном месте, что упрощает поддержку приложения.
  2. Интеграция с темой: позволяет динамически использовать переменные темы, улучшая адаптивность и консистентность.
  3. Универсальность: поддерживаются псевдоклассы, медиазапросы и классы компонентов MUI, что делает GlobalStyles полноценной альтернативой глобальному CSS.
  4. Снижение дублирования: повторяющиеся стили компонентов не нужно прописывать внутри каждого компонента, что уменьшает количество кода.

Рекомендации по использованию

  • Размещать GlobalStyles в корневом компоненте приложения (например, рядом с ThemeProvider), чтобы стили применялись ко всем дочерним элементам.
  • Использовать тему для управления цветами, шрифтами и отступами, чтобы глобальные стили автоматически подстраивались под разные темы.
  • Минимизировать глобальные изменения, чтобы не ломать внутренние стили MUI компонентов. Основное внимание уделять базовым элементам HTML (body, a, h1–h6, p, button).

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

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

const theme = createTheme({
  palette: {
    mode: 'light',
    background: {
      default: '#f0f2f5',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <GlobalStyles
        styles={{
          body: {
            margin: 0,
            padding: 0,
            backgroundColor: theme.palette.background.default,
          },
          a: {
            color: theme.palette.primary.main,
            textDecoration: 'none',
          },
          button: {
            borderRadius: 8,
            '&:hover': {
              backgroundColor: theme.palette.primary.dark,
            },
          },
        }}
      />
      {/* Остальная часть приложения */}
    </ThemeProvider>
  );
}

В этом примере GlobalStyles задаёт:

  • Общий фон и обнуление отступов для страницы.
  • Цвет ссылок в соответствии с палитрой темы.
  • Кнопки с единым скруглением и изменением цвета при наведении.

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

Оглавление