Styled Components API

Styled Components API в MUI предоставляет мощный и гибкий способ создавать стилизованные компоненты, комбинируя возможности CSS-in-JS с компонентной архитектурой React. Основной принцип работы заключается в том, что каждый компонент может быть расширен и стилизован через функцию styled, которая возвращает новый React-компонент с применёнными стилями.

Создание базового стилизованного компонента

Функция styled импортируется из пакета @mui/material/styles и принимает два аргумента:

  1. Компонент или HTML-элемент — базовая основа, на которой строится новый компонент.
  2. Объект с опциями (необязательно) — дополнительные настройки, такие как shouldForwardProp, позволяющие фильтровать свойства, которые не должны передаваться в DOM.

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

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

const MyButton = styled(Button)({
  backgroundColor: 'blue',
  color: 'white',
  padding: '8px 16px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
});

В этом примере создаётся новый компонент MyButton, который наследует все свойства стандартного Button, но имеет кастомные стили.

Стилизация с использованием темы

MUI предоставляет доступ к теме внутри styled-компонентов через callback-функцию:

const ThemedButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.primary.contrastText,
  padding: theme.spacing(2),
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

Использование темы позволяет:

  • Поддерживать единый стиль приложения.
  • Динамически менять цвета и размеры через глобальные настройки темы.
  • Легко адаптировать компоненты к светлой и тёмной схемам.

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

Styled Components API поддерживает передачу пропсов для динамической стилизации:

const DynamicButton = styled(Button)(({ theme, variant }) => ({
  backgroundColor: variant === 'danger' ? theme.palette.error.main : theme.palette.success.main,
  color: theme.palette.common.white,
}));

В этом примере цвет кнопки зависит от переданного пропа variant. Такой подход позволяет создавать гибкие и переиспользуемые UI-компоненты.

Использование shouldForwardProp

Иногда нужно, чтобы определённые пропсы не передавались в DOM. Для этого используется функция shouldForwardProp:

const Box = styled('div', {
  shouldForwardProp: (prop) => prop !== 'highlighted'
})(({ highlighted, theme }) => ({
  backgroundColor: highlighted ? theme.palette.warning.light : theme.palette.background.default,
}));

highlighted не будет передан в HTML-атрибуты, но будет использован для вычисления стилей.

Комбинирование нескольких стилей

Можно комбинировать несколько объектов стилей и функций, что делает подход MUI особенно мощным:

const FancyButton = styled(Button)(
  ({ theme }) => ({
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(1, 3),
  }),
  ({ disabled }) => ({
    opacity: disabled ? 0.5 : 1,
  })
);

Первый объект использует тему, а второй — пропы компонента для динамических эффектов.

Использование с нестандартными HTML-элементами

styled работает не только с компонентами MUI, но и с любыми HTML-элементами:

const FancyDiv = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  gap: '16px',
  padding: '24px',
  border: '1px solid gray',
});

Это упрощает создание layout-компонентов без необходимости использовать отдельные библиотеки CSS.

Анимации и псевдоклассы

Styled Components API полностью поддерживает CSS-псевдоклассы и keyframes:

import { keyframes } from '@mui/system';

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const AnimatedBox = styled('div')({
  animation: `${fadeIn} 1s ease-in-out`,
});

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

Резюме возможностей Styled Components API

  • Стилизация компонентов на базе MUI и HTML-элементов.
  • Доступ к теме через callback-функцию.
  • Динамическая стилизация через пропсы.
  • Фильтрация пропсов с помощью shouldForwardProp.
  • Поддержка CSS-псевдоклассов и анимаций.
  • Комбинирование нескольких функций и объектов стилей.

Этот API является ядром кастомизации в MUI и позволяет создавать полностью адаптируемые, тематически согласованные и переиспользуемые UI-компоненты.

Оглавление