Styled Components

Styled Components – CSS-in-JS библиотека, позволяющая писать настоящий CSS внутри JavaScript с помощью tagged template literals. Каждый styled-компонент автоматически получает уникальное имя класса, что исключает конфликты имён и ограничивает стили рамками компонента. Ключевая возможность – динамическая стилизация: значения CSS меняются в зависимости от props компонента.

Библиотека извлекает только CSS, нужный для отрендеренных компонентов, и внедряет его в страницу, поэтому неиспользуемые стили никогда не попадают в браузер. Поддержка тем через ThemeProvider обеспечивает единые дизайн-токены во всём приложении. Для React-разработчиков Styled Components согласует стилизацию с компонентной моделью, держа визуальную логику рядом с поведением. Плата – небольшой overhead в рантайме по сравнению со статическим CSS и менее удобная отладка: сгенерированные имена классов нечитаемы без Babel-плагина, добавляющего имена компонентов.