Repolode
Предложить
emotion-js

emotion-js/emotion

Быстрая и гибкая CSS-in-JS-библиотека для стилизации приложений с помощью строковых или объектных стилей и предсказуемой композиции.

Открыть на GitHubСайт
Звёзды
18,018
Форки
1,137
Открытые issues
399
Последний коммит
2 месяца назад

Что это?

Emotion позволяет описывать стили компонентов на JavaScript — в виде строк или объектов. Стили генерируются во время выполнения и применяются как CSS, поэтому внешний вид можно менять с помощью props и state, не поддерживая отдельные таблицы стилей.

Модель композиции помогает избежать конфликтов специфичности CSS, поэтому объединение стилей работает предсказуемо. Emotion предоставляет source maps и метки компонентов для отладки, а в production-сборках активно кэширует сгенерированные стили.

Основные пакеты — @emotion/react, который предоставляет css prop и помощник jsx, и @emotion/styled с API в стиле styled-components. Дополнительный Babel-плагин позволяет применять дополнительные оптимизации и настройки.

Ключевые возможности

  • 01Описывайте стили строками или объектами.
  • 02Предоставляет css prop и API в стиле styled-components.
  • 03Предсказуемая композиция стилей, позволяющая избежать проблем со специфичностью.
  • 04Source maps и метки для упрощения отладки.
  • 05Активное кэширование стилей в production.
  • 06Дополнительный Babel-плагин для дальнейших оптимизаций.

Сценарии использования

  • Стилизация React-приложений с помощью динамических стилей или стилей, зависящих от props.
  • Создание переиспользуемых библиотек компонентов с компонуемыми стилями.
  • Переход от таблиц стилей на основе классов к стилям, размещённым рядом с компонентами.

Быстрый старт

  1. 1

    Установите основной пакет с помощью npm

    npm install --save @emotion/react
  2. 2

    Импортируйте jsx из Emotion и используйте prop css в компоненте

Что важно знать

  • Плагин Babel необязателен, но для некоторых функций он необходим.

Темы

#css-in-js#react#css#styling#frontend-styling#javascript#babel-plugin#emotion#reactjs

Частые вопросы

Что такое emotion?
Быстрая и гибкая CSS-in-JS-библиотека для стилизации приложений с помощью строковых или объектных стилей и предсказуемой композиции. Emotion позволяет описывать стили компонентов на JavaScript — в виде строк или объектов. Стили генерируются во время выполнения и применяются как CSS, поэтому внешний вид можно менять с помощью props и state, не поддерживая отдельные таблицы стилей.
emotion можно использовать бесплатно? Какая у него лицензия?
emotion распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
emotion всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в emotion — 28 авг. 2026 г..
Для чего можно использовать emotion?
Стилизация React-приложений с помощью динамических стилей или стилей, зависящих от props. Создание переиспользуемых библиотек компонентов с компонуемыми стилями. Переход от таблиц стилей на основе классов к стилям, размещённым рядом с компонентами.
Как установить emotion?
Установите основной пакет с помощью npm: npm install --save @emotion/react Импортируйте jsx из Emotion и используйте prop css в компоненте
Где скачать emotion?
Исходный код и инструкции по установке — на GitHub: https://github.com/emotion-js/emotion

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты