CSS-переменные в MUI

MUI (Material-UI) предоставляет гибкие возможности для работы с темами и стилями компонентов через систему CSS-in-JS. Одним из мощных инструментов является использование CSS-переменных, что позволяет создавать динамические и легко настраиваемые интерфейсы.

Создание CSS-переменных в теме MUI

Основной способ интеграции CSS-переменных в MUI — через объект темы, создаваемый с помощью createTheme. В MUI 5 и выше рекомендуется использовать свойство components для настройки CSS-переменных, либо добавлять их в глобальные стили через CssBaseline или GlobalStyles.

Пример объявления CSS-переменных через тему:

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        ':root': {
          '--color-primary': '#1976d2',
          '--color-secondary': '#dc004e',
          '--font-main': '"Roboto", sans-serif',
        },
      },
    },
  },
});

export default theme;

Здесь создаются глобальные CSS-переменные, которые можно использовать во всех компонентах приложения, интегрированных с MUI.

Применение CSS-переменных в стилях компонентов

CSS-переменные позволяют создавать динамические стили, которые можно изменять без переписывания темы или компонентов. MUI поддерживает работу с ними через sx-проп, styled-утилиту и makeStyles.

Пример использования через sx:

import Box from '@mui/material/Box';

function ExampleBox() {
  return (
    <Box
      sx={{
        backgroundColor: 'var(--color-primary)',
        color: 'white',
        padding: 2,
        borderRadius: 1,
        fontFamily: 'var(--font-main)',
      }}
    >
      Контент с использованием CSS-переменных
    </Box>
  );
}

Пример использования через styled:

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

const StyledButton = styled(Button)`
  background-color: var(--color-secondary);
  color: white;
  &:hover {
    background-color: #b0003a;
  }
`;

export default function ExampleButton() {
  return <StyledButton>Кнопка с CSS-переменной</StyledButton>;
}

Динамическое изменение CSS-переменных

Одним из преимуществ CSS-переменных является возможность менять их значения в рантайме без пересоздания темы. Это полезно для реализации темной и светлой темы, пользовательских настроек или анимаций.

Пример переключения темы через CSS-переменные:

const toggleTheme = (isDark) => {
  const root = document.documentElement;

  if (isDark) {
    root.style.setProperty('--color-primary', '#90caf9');
    root.style.setProperty('--color-secondary', '#f48fb1');
  } else {
    root.style.setProperty('--color-primary', '#1976d2');
    root.style.setProperty('--color-secondary', '#dc004e');
  }
};

Используя этот подход, можно управлять всей цветовой палитрой приложения без изменения компонентов напрямую.

Взаимодействие CSS-переменных с системой тем MUI

MUI предоставляет функции theme.palette и theme.spacing, но CSS-переменные позволяют добавить дополнительный уровень гибкости:

  • Цвета: можно связывать переменные с палитрой и использовать их в sx или styled.
  • Шрифты и типографика: изменение шрифтов через переменные упрощает поддержку глобального стиля.
  • Отступы и размеры: динамическое масштабирование интерфейса через переменные ускоряет адаптацию под разные разрешения экранов.

Пример использования CSS-переменной для адаптивного шрифта:

<Box
  sx={{
    fontSize: 'calc(16px + (var(--scale-factor, 1) * 2))',
  }}
>
  Адаптивный текст
</Box>

Ограничения и особенности

  1. CSS-переменные работают только с CSS-свойствами, поддерживающими значения переменных. Например, нельзя напрямую использовать их для keyframes в анимациях без дополнительных трюков.
  2. Значения переменных можно переопределять локально в компонентах, но при этом глобальные стили останутся неизменными.
  3. Переменные взаимодействуют с системой темы MUI, но theme.palette.primary.main и переменная --color-primary могут быть синхронизированы вручную, так как MUI не генерирует переменные автоматически.

Интеграция с TypeScript

Для TypeScript удобно создать типы для CSS-переменных:

interface CssVars {
  '--color-primary': string;
  '--color-secondary': string;
  '--font-main': string;
}

const root = document.documentElement as HTMLElement & { style: CssVars };

root.style['--color-primary'] = '#1976d2';

Это повышает безопасность кода и предотвращает ошибки при написании стилей.

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

Оглавление