Какой опыт на Styled Component

Styled Components — это библиотека для стилизации React-приложений с использованием CSS-in-JS.

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

• Создание стилизованных компонентов — оборачиваешь компонент в styled, применяешь CSS.

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  padding: 10px 20px;
`;

• Динамические стили — пропсы влияют на стили (как в примере выше).
• Темы — глобальные стили через ThemeProvider.
• Миксины и расширение — css для переиспользуемых стилей, styled(Component) для наследования.
• SSR и оптимизация — автоматическая критическая загрузка CSS.

Плюсы:
✅ Изоляция стилей, нет конфликтов имён.
✅ Легко поддерживать динамические стили.
✅ Интеграция с темами Material-UI и др.

Минусы:
⚠️ Нужно время на изучение синтаксиса.
⚠️ Больше JS-бандла, чем у чистого CSS.

Пример из практики: темизация кнопок, анимации через keyframes, адаптивные стили.