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

Оформянето на React приложение може да бъде предизвикателство, особено ако искате да поддържате стиловете си организирани и поддържани. За да опрости този процес, библиотеката Emotion предоставя абстракция от по-високо ниво върху CSS.

Какво е емоция?

Emotion е библиотека за стилизиране на React приложения, която предоставя лесен и ефективен начин за управление на вашите стилове. Той ви позволява да пишете CSS в JavaScript и предоставя гъвкав API за стилизиране на вашите компоненти.

Едно от основните предимства на използването на Emotion за стилизиране на вашето React приложение е, че предоставя по-ефективен начин за управление на вашите стилове. Например, можете да използвате идентични имена на класове в множество компоненти без риск от възникване на сблъсъци при именуване при работа с CSS/SASS.

Библиотеката Emotion прилага вашите стилове само към компонентите, които ги използват, а не към цялата страница. Това може да ви помогне да избегнете конфликти с други стилове на страницата и да направите кода си по-модулен и многократно използваем.

instagram viewer

Как да инсталирате Emotion

За да добавите библиотеката Emotion към вашето приложение React, изпълнете следната терминална команда:

npm install --save @emotion/react

Библиотеката Emotion вече трябва да е инсталирана във вашия проект и готова за използване за стилизиране на вашето React приложение.

Оформяне с помощта на css Prop на Emotion

След като инсталирате библиотеката Emotion, ще можете да използвате css prop за стилизиране на вашето React приложение. The css prop е подобен на style prop, тъй като можете да му предавате стилове под формата на низове или обикновени JavaScript обекти.

За да оформите приложението си с помощта на css prop, трябва да го импортирате от @emotion/реагирайте библиотека, след което дефинирайте своите стилове:

/** @jsxImportSource @емоция/реагира */
импортиране Реагирайте от"реагира";
импортиране {css} от'@emotion/react';
функцияПриложение() {
връщане (
 подплата: 0.5рем 1rem;
 граница: няма;
 семейство шрифтове: курсив;
 радиус на границата: 12px;
 цвят: #333333;
 цвят на фона: наследяване;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Щракнете върху мен
 </button>
 )
}


износпо подразбиране Приложение;

Първият ред код, /** @jsxImportSource @emotion/react */, е конкретен коментар, който трябва да добавите към JSX файла, за да посочите, че библиотеката Emotion трябва да се използва като JSX прагма за този файл.

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

В този случай, @emotion/реагирайте pragma казва на JSX да използва jsx функция от библиотеката Emotion за трансформиране на JSX кода. Като добавите pragma коментара към JSX файл, можете да използвате функциите CSS-in-JS на библиотеката Emotion във вашите компоненти.

Компонентът бутон изобразява бутон с някакъв персонализиран стил. Ето, css prop добавя персонализирания стил към елемента бутон.

The css prop също така поддържа вложен стил. Вложените стилове ви позволяват да пишете стилове, които са вложени един в друг.

Например:

/** @jsxImportSource @емоция/реагира */
импортиране Реагирайте от"реагира";
импортиране {css} от'@emotion/react';
функцияПриложение() {
връщане (
 подплата: 0.5рем 1rem;
 граница: няма;
 семейство шрифтове: курсив;
 радиус на границата: 12px;
 цвят: #333333;
 цвят на фона: наследяване;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover{
 цвят: #e2e2e2;
 Цвят на фона: #333333;
 }
`}>
 Щракнете върху мен
 </button>
 )
}
износпо подразбиране Приложение;

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

Предаване на стилове на обект към css Prop

The css prop също приема обикновени стилове на JavaScript обекти. Когато стилизирате няколко компонента, използването на стилове на обекти ви позволява да използвате повторно стилове във вашите компоненти.

За да предадете стилове на обекти към css prop, дефинирайте стиловете като JavaScript обект и го предайте на prop:

конст стил = {
 подплата: „0,5 rem 1 rem“,
 граница: 'нито един',
 шрифтово семейство: "курсив",
 borderRadius: '12px',
 цвят: '#333333',
 Цвят на фона: "наследявам",
 marginBlockStart: "2rem",
 marginBlockEnd: "2rem",
"&: hover": {
 цвят: '#e2e2e2',
 Цвят на фона: '#333333',
 }
}
връщане (
"приложение">

Обърнете внимание, че имената на свойствата на CSS са с буквени букви вместо с тирета. Това е така, защото стиловете са дефинирани като обекти на JavaScript, които използват конвенции за именуване на camelCase.

Оформяне с помощта на стилизираните компоненти

Библиотеката Emotion също използва стилизирани компоненти, когато стилизира React приложения. Използване на стилизирани компоненти е подобен на компонентите на React, освен факта, че съдържат стилове извън кутията. За да създадете стилизирани компоненти, ще използвате стилизиран функция.

The стилизиран функция ви позволява да създавате стилизирани компоненти за многократна употреба. За да използвате стилизиран функция, импортирайте я от емоция/стил библиотека.

За да получите @emotion/стилизиран библиотека във вашето приложение, вие ще го инсталирате във вашия проект. Можете да направите това, като изпълните следната команда в терминала на вашия проект:

npm инсталирайте @emotion/styled

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

импортиране стилизиран от"@emotion/styled";
конст Бутон = styled.button({
 подплата: „0,5 rem 1 rem“,
 граница: 'нито един',
 шрифтово семейство: "курсив",
 borderRadius: '12px',
 цвят: '#333333',
 Цвят на фона: "наследявам",
 marginBlockStart: "2rem",
 marginBlockEnd: "2rem",


"&: hover": {
 цвят: '#e2e2e2',
 Цвят на фона: '#333333',
 }
})
износпо подразбиране бутон;

В кодовия блок по-горе, стилизиран компонент Бутон е създаден. Можете да използвате този бутон във вашето приложение React като всеки друг компонент на React.

Така:

импортиране Реагирайте от"реагира";
импортиране Бутон от'./Бутон';
функцияПриложение() {
връщане (








износпо подразбиране Приложение;

Изобразяване на Приложение ще покаже бутон със стиловете, дефинирани в Бутон компонент на вашия екран.

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

импортиране стилизиран от"@emotion/styled";
конст Бутон = styled.button`
 подплата: 0.5рем 1rem;
 граница: няма;
 семейство шрифтове: курсив;
 радиус на границата: 12px;
 цвят: #333333;
 цвят на фона: наследяване;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hover {
 цвят: #e2e2e2;
 Цвят на фона: #333333;
 }
`
износпо подразбиране бутон;

Ефективен стайлинг с емоция

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

Така че, ако търсите по-ефективен и гъвкав начин за стилизиране на компонентите на React, помислете за Emotion.