Библиотека Emotion упрощает использование CSS в React, а также добавляет некоторые удобные функции синтаксиса.

Стилизация приложения React может быть сложной задачей, особенно если вы хотите, чтобы ваши стили были организованы и удобны в сопровождении. Чтобы упростить этот процесс, библиотека Emotion предоставляет абстракцию более высокого уровня поверх CSS.

Что такое эмоция?

Emotion — это библиотека для стилизации приложений React, которая обеспечивает простой и эффективный способ управления вашими стилями. Он позволяет вам писать CSS на JavaScript и предоставляет гибкий API для стилизации ваших компонентов.

Одним из основных преимуществ использования Emotion для стилизации вашего приложения React является то, что он обеспечивает более эффективный способ управления вашими стилями. Например, вы можете использовать одинаковые имена классов в нескольких компонентах без риска возникновения конфликтов имен. при работе с CSS/SASS.

Библиотека Emotion применяет ваши стили только к компонентам, которые их используют, а не ко всей странице. Это может помочь вам избежать конфликтов с другими стилями на странице и сделать ваш код более модульным и пригодным для повторного использования.

instagram viewer

Как установить эмоции

Чтобы добавить библиотеку Emotion в приложение React, выполните следующую команду терминала:

npm install --save @emotion/react

Теперь библиотека Emotion должна быть установлена ​​в вашем проекте и готова к использованию для оформления вашего приложения React.

Стилизация с помощью css Prop от Emotion

Установив библиотеку Emotion, вы сможете использовать css prop для оформления вашего приложения React. css prop похож на style prop, так как вы можете передавать ему стили в виде строк или обычных объектов JavaScript.

Для оформления вашего приложения с помощью css prop, вы должны импортировать его из @эмоция/реакция библиотеку, затем определите свои стили:

/** @jsxImportSource @эмоция/реагировать */
Импортировать Реагировать от«реагировать»;
Импортировать {CSS} от'@эмоция/реакция';
функцияПриложение() {
возвращаться (
 заполнение: 0.5бэр 1бэр;
 граница: нет;
 семейство шрифтов: скоропись;
 радиус границы: 12пкс;
 цвет: #333333;
 цвет фона: наследовать;
 старт блока маржи: 2бэр;
 край-блок-конец: 2бэр;
`}>
 Нажми на меня
 </button>
 )
}


экспортпо умолчанию Приложение;

Первая строка кода, /** @jsxImportSource @эмоция/реакция */, — это особый комментарий, который вы должны добавить к файлу JSX, чтобы указать, что библиотеку Emotion следует использовать в качестве прагмы JSX для этого файла.

В JSX прагма — это функция, которая преобразует синтаксис JSX в обычный JavaScript. По умолчанию React использует React.createElement функционировать как прагма JSX. Однако с @jsxImportSource комментарий, вы можете указать другую прагму.

В этом случае @эмоция/реакция прагма сообщает JSX использовать jsx из библиотеки Emotion для преобразования кода JSX. Добавляя комментарий прагмы к файлу JSX, вы можете использовать функции CSS-in-JS библиотеки Emotion в своих компонентах.

Компонент кнопки отображает кнопку с некоторым пользовательским стилем. Здесь css prop добавляет пользовательский стиль к элементу кнопки.

css prop также поддерживает вложенные стили. Вложенные стили позволяют писать стили, вложенные друг в друга.

Например:

/** @jsxImportSource @эмоция/реагировать */
Импортировать Реагировать от«реагировать»;
Импортировать {CSS} от'@эмоция/реакция';
функцияПриложение() {
возвращаться (
 заполнение: 0.5бэр 1бэр;
 граница: нет;
 семейство шрифтов: скоропись;
 радиус границы: 12пкс;
 цвет: #333333;
 цвет фона: наследовать;
 старт блока маржи: 2бэр;
 край-блок-конец: 2бэр;


 &:наведите{
 цвет: #e2e2e2;
 фоновый цвет: #333333;
 }
`}>
 Нажми на меня
 </button>
 )
}
экспортпо умолчанию Приложение;

В этом примере объявление стиля наведения использует функцию вложенного стиля css опора Фон и цвет шрифта в блоке кода выше будут меняться всякий раз, когда вы наводите курсор на кнопку.

Передача стилей объекта в CSS Prop

css prop также принимает обычные стили объектов JavaScript. При стилизации нескольких компонентов использование стилей объектов позволяет вам повторно использовать стили в ваших компонентах.

Чтобы передать стили объекта в css prop, определите стили как объект JavaScript и передайте его свойству:

константа стиль = {
 заполнение: «0,5 бэр 1 бэр»,
 граница: 'никто',
 семейство шрифтов: 'курсив',
 границаРадиус: «12 пикселей»,
 цвет: '#333333',
 фоновый цвет: 'наследовать',
 МаржаБлокСтарт: 2рем,
 маржаБлокЭнд: 2рем,
'&: наведите курсор': {
 цвет: '#e2e2e2',
 фоновый цвет: '#333333',
 }
}
возвращаться (
"приложение">

Обратите внимание, что имена свойств CSS пишутся в верблюжьем регистре, а не через дефис. Это связано с тем, что стили определены как объекты JavaScript, которые используют соглашения об именах в стиле camelCase.

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

Библиотека Emotion также использует стилизованные компоненты при стилизации приложений React. Использование стилизованных компонентов похож на компоненты React, за исключением того, что они содержат стили из коробки. Для создания стилизованных компонентов вы будете использовать стилизованный функция.

стилизованный Функция позволяет создавать многократно используемые стилизованные компоненты. Чтобы использовать стилизованный функцию, импортируйте ее из эмоция/стиль библиотека.

Чтобы получить @emotion/styled библиотеку в своем приложении, вы установите ее в свой проект. Вы можете сделать это, выполнив следующую команду в терминале вашего проекта:

npm установить @emotion/styled

После установки @emotion/styled библиотека, импортируйте стилизованный функционируйте и определяйте свои стили:

Импортировать стилизованный от"@эмоция/стилизованный";
константа Кнопка = стилизованная.кнопка({
 заполнение: «0,5 бэр 1 бэр»,
 граница: 'никто',
 семейство шрифтов: 'курсив',
 границаРадиус: «12 пикселей»,
 цвет: '#333333',
 фоновый цвет: 'наследовать',
 МаржаБлокСтарт: 2рем,
 маржаБлокЭнд: 2рем,


'&: наведите курсор': {
 цвет: '#e2e2e2',
 фоновый цвет: '#333333',
 }
})
экспортпо умолчанию Кнопка;

В блоке кода выше стилизованный компонент Кнопка создано. Вы можете использовать эту кнопку в своем приложении React, как и любой другой компонент React.

Вот так:

Импортировать Реагировать от«реагировать»;
Импортировать Кнопка от'./Кнопка';
функцияПриложение() {
возвращаться (








экспортпо умолчанию Приложение;

Рендеринг Приложение компонент отобразит кнопку со стилями, определенными в Кнопка компонент на вашем экране.

стилизованный функция также принимает строковые стили. Он выглядит иначе, чем подход со стилями объектов, но работает аналогично.

Импортировать стилизованный от"@эмоция/стилизованный";
константа Кнопка = стилизованная.кнопка`
 заполнение: 0.5бэр 1бэр;
 граница: нет;
 семейство шрифтов: скоропись;
 радиус границы: 12пкс;
 цвет: #333333;
 цвет фона: наследовать;
 старт блока маржи: 2бэр;
 край-блок-конец: 2бэр;


 &: наведите {
 цвет: #e2e2e2;
 фоновый цвет: #333333;
 }
`
экспортпо умолчанию Кнопка;

Эффективный стиль с эмоциями

Emotion — это мощная библиотека для стилизации компонентов React, которая обеспечивает простой и эффективный способ управления вашими стилями. Независимо от того, являетесь ли вы новичком или опытным разработчиком, Emotion может помочь упростить процесс стилизации вашего приложения React, а также упростить поддержку и масштабирование вашего кода.

Поэтому, если вы ищете более эффективный и гибкий способ стилизации компонентов React, обратите внимание на Emotion.