Styled Components

Styled Components — это библиотека для стилизации React-компонентов с использованием шаблонных литералов ES6. Она позволяет создавать компоненты с инкапсулированными стилями, что особенно удобно при работе с MDX, где структура документа часто комбинирует Markdown и JSX.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

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

Использование Styled Components внутри MDX

MDX позволяет вставлять React-компоненты прямо в Markdown. Styled Components идеально интегрируются с этим подходом, создавая единое пространство для контента и стилизации.

import { Button } from './Button';

# Пример кнопки в MDX

Нажмите на кнопку ниже:

<Button>Кликните меня</Button>

Такой подход сохраняет преимущества Markdown для контента и гибкость React-компонентов для интерактивности и стилизации.

Темизация и глобальные стили

Styled Components поддерживает концепцию тем, что особенно полезно для документации и учебников с различными визуальными стилями.

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: '#3498db',
  secondaryColor: '#2ecc71',
  fontSize: '16px',
};

<ThemeProvider theme={theme}>
  <Button>Тематическая кнопка</Button>
</ThemeProvider>

Внутри styled-компонента можно использовать значения темы через проп theme:

const ThemedButton = styled.button`
  background-color: ${({ theme }) => theme.primaryColor};
  color: #fff;
  font-size: ${({ theme }) => theme.fontSize};
`;

Такой подход позволяет централизованно управлять стилями всего приложения или документации.

Передача пропсов для динамических стилей

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

const Button = styled.button`
  background-color: ${({ variant }) =>
    variant === 'primary' ? '#3498db' : '#95a5a6'};
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
`;

В MDX использование компонента с разными пропсами выглядит так:

<Button variant="primary">Основная</Button>
<Button variant="secondary">Второстепенная</Button>

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

Styled Components позволяет подключать CSS-анимации и псевдоклассы непосредственно в шаблонных литералах.

import styled, { keyframes } from 'styled-components';

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

const AnimatedDiv = styled.div`
  animation: ${fadeIn} 1s ease-in-out;
`;

MDX-компоненты с анимацией создают более интерактивный контент без необходимости отдельного CSS-файла.

Расширение и переиспользование стилей

Styled Components позволяет наследовать стили от других компонентов, создавая расширяемые UI-блоки.

const BaseButton = styled.button`
  padding: 10px 20px;
  border-radius: 4px;
`;

const PrimaryButton = styled(BaseButton)`
  background-color: #3498db;
  color: #fff;
`;

const SecondaryButton = styled(BaseButton)`
  background-color: #95a5a6;
  color: #fff;
`;

Такой подход улучшает поддерживаемость и консистентность дизайна при работе с большими проектами или MDX-документацией.

Стилизация существующих компонентов

Styled Components можно использовать не только для базовых HTML-тегов, но и для любых React-компонентов, расширяя их внешний вид без изменения логики.

const CustomButton = ({ children, ...props }) => <button {...props}>{children}</button>;

const StyledCustomButton = styled(CustomButton)`
  background-color: #e74c3c;
  color: white;
  padding: 8px 16px;
`;

MDX позволяет импортировать такие компоненты и использовать их вместе с контентом, сохраняя единый стиль документации.

Селекторы и вложенность

Styled Components поддерживают вложенные селекторы и псевдоэлементы, что упрощает создание сложных визуальных компонентов.

const Card = styled.div`
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;

  h2 {
    margin-top: 0;
    color: #2c3e50;
  }

  p {
    font-size: 14px;
    color: #7f8c8d;
  }

  &:hover {
    border-color: #3498db;
  }
`;

В MDX такие компоненты позволяют создавать структурированный контент с богатым стилевым оформлением.

Итоговые возможности

Styled Components в сочетании с MDX обеспечивает:

  • Полную инкапсуляцию стилей компонентов.
  • Динамическую стилизацию через пропсы и темы.
  • Легкую интеграцию с Markdown-контентом.
  • Возможность добавления анимаций, псевдоклассов и наследования стилей.
  • Унификацию визуального оформления через ThemeProvider.

Эти свойства делают библиотеку незаменимой при создании интерактивных и стилизованных MDX-документов.

Оглавление