Biblioteka Emotion upraszcza korzystanie z CSS w React i dodaje kilka przydatnych funkcji składniowych.

Stylizacja aplikacji React może być trudna, zwłaszcza jeśli chcesz zachować porządek i łatwość utrzymania stylów. Aby uprościć ten proces, biblioteka Emotion zapewnia abstrakcję wyższego poziomu oprócz CSS.

Czym jest emocja?

Emotion to biblioteka do stylizacji aplikacji React, która zapewnia prosty i skuteczny sposób zarządzania stylami. Pozwala pisać CSS w JavaScript i zapewnia elastyczny interfejs API do stylizacji komponentów.

Jedną z głównych zalet używania Emotion do stylizowania aplikacji React jest to, że zapewnia bardziej efektywny sposób zarządzania stylami. Na przykład można używać identycznych nazw klas w wielu komponentach bez ryzyka kolizji nazw podczas pracy z CSS/SASS.

Biblioteka Emotion stosuje Twoje style tylko do komponentów, które ich używają, a nie do całej strony. Pomoże to uniknąć konfliktów z innymi stylami na stronie i sprawi, że Twój kod będzie bardziej modułowy i będzie można go ponownie wykorzystać.

instagram viewer

Jak zainstalować emocje

Aby dodać bibliotekę Emotion do aplikacji React, uruchom następującą komendę terminala:

npm install --save @emotion/react

Biblioteka Emotion powinna być teraz zainstalowana w twoim projekcie i gotowa do użycia do stylizowania aplikacji React.

Stylizacja za pomocą css Prop Emotion

Po zainstalowaniu biblioteki Emotion będziesz mógł korzystać z css prop do stylizowania aplikacji React. The css prop jest podobny do właściwości style, ponieważ można do niej przekazywać style w postaci łańcuchów znaków lub zwykłych obiektów JavaScript.

Aby stylizować aplikację za pomocą css prop, musisz zaimportować go z pliku @emocja/reakcja library, a następnie zdefiniuj swoje style:

/** @jsxImportSource @emocja/reagować */
import Reagować z'reagować';
import {css} z„@emocja/reakcja”;
funkcjonowaćAplikacja() {
powrót (
 wyściółka: 0.5Rem 1rem;
 obramowanie: brak;
 rodzina czcionek: kursywa;
 promień granicy: 12piks;
 kolor: #333333;
 kolor tła: dziedziczyć;
 początek bloku marginesu: 2rem;
 koniec bloku marginesu: 2rem;
`}>
 Kliknij
 </button>
 )
}


eksportdomyślny Aplikacja;

Pierwsza linia kodu, /** @jsxImportSource @emocja/reaguj */, to szczególny komentarz, który należy dodać do pliku JSX, aby wskazać, że biblioteka Emotion powinna być używana jako pragma JSX dla tego pliku.

W JSX pragma to funkcja, która przekształca składnię JSX w zwykły JavaScript. Domyślnie React używa React.createElement działać jako pragma JSX. Jednak z @jsxImportSource komentarz, możesz określić inną pragma.

W tym przypadku @emocja/reakcja pragma mówi JSX, aby używał jsx funkcję z biblioteki Emotion, aby przekształcić kod JSX. Dodając komentarz pragma do pliku JSX, możesz użyć funkcji CSS-in-JS biblioteki Emotion w swoich komponentach.

Komponent przycisku renderuje przycisk z pewnymi niestandardowymi stylami. Tutaj css prop dodaje niestandardowy styl do elementu przycisku.

The css prop obsługuje również stylizację zagnieżdżoną. Stylizacja zagnieżdżona umożliwia pisanie stylów zagnieżdżonych w sobie.

Na przykład:

/** @jsxImportSource @emocja/reagować */
import Reagować z'reagować';
import {css} z„@emocja/reakcja”;
funkcjonowaćAplikacja() {
powrót (
 wyściółka: 0.5Rem 1rem;
 obramowanie: brak;
 rodzina czcionek: kursywa;
 promień granicy: 12piks;
 kolor: #333333;
 kolor tła: dziedziczyć;
 początek bloku marginesu: 2rem;
 koniec bloku marginesu: 2rem;


 &:unosić się{
 kolor: #e2e2e2;
 kolor tła: #333333;
 }
`}>
 Kliknij
 </button>
 )
}
eksportdomyślny Aplikacja;

W tym przykładzie deklaracja stylu hover wykorzystuje zagnieżdżoną funkcję stylizacji pliku css rekwizyt. Kolor tła i czcionki w powyższym bloku kodu zmieni się za każdym razem, gdy najedziesz kursorem na przycisk.

Przekazywanie stylów obiektów do css Prop

The css prop akceptuje również zwykłe style obiektowe JavaScript. Podczas stylizowania kilku komponentów użycie stylów obiektowych umożliwia ponowne użycie stylów w komponentach.

Aby przekazać style obiektów do css prop, zdefiniuj style jako obiekt JavaScript i przekaż go do prop:

konst styl = {
 wyściółka: '0.5rem 1rem',
 granica: 'nic',
 rodzina czcionek: 'kursywny',
 promień granicy: „12 pikseli”,
 kolor: '#333333',
 kolor tła: 'dziedziczyć',
 MarginBlockStart: '2rem',
 marginesBlockEnd: '2rem',
'&:unosić się': {
 kolor: '#e2e2e2',
 kolor tła: '#333333',
 }
}
powrót (
„aplikacja”>

Zwróć uwagę, że nazwy właściwości CSS mają postać camelCased, a nie łączników. Dzieje się tak, ponieważ style są zdefiniowane jako obiekty JavaScript, które używają konwencji nazewnictwa camelCase.

Stylizacja przy użyciu stylizowanych komponentów

Biblioteka Emotion korzysta również ze stylizowanych komponentów podczas stylizowania aplikacji React. Używanie stylizowanych komponentów jest podobny do komponentów React, poza tym, że zawierają gotowe style. Aby utworzyć stylizowane komponenty, użyjesz stylizowany funkcjonować.

The stylizowany Funkcja umożliwia tworzenie stylizowanych komponentów wielokrotnego użytku. Aby użyć stylizowany funkcję, zaimportuj ją z pliku emocje/stylizowane biblioteka.

Aby uzyskać @emocje/stylizowane bibliotekę w swojej aplikacji, zainstalujesz ją w swoim projekcie. Możesz to zrobić, uruchamiając następujące polecenie w terminalu swojego projektu:

npm zainstaluj @emotion/styled

Po zainstalowaniu @emocje/stylizowane biblioteka, zaimportuj stylizowany funkcjonuj i zdefiniuj swoje style:

import stylizowany z„@emocje/stylizowane”;
konst Przycisk = stylizowany przycisk ({
 wyściółka: '0.5rem 1rem',
 granica: 'nic',
 rodzina czcionek: 'kursywny',
 promień granicy: „12 pikseli”,
 kolor: '#333333',
 kolor tła: 'dziedziczyć',
 MarginBlockStart: '2rem',
 marginesBlockEnd: '2rem',


'&:unosić się': {
 kolor: '#e2e2e2',
 kolor tła: '#333333',
 }
})
eksportdomyślny Przycisk;

W powyższym bloku kodu stylizowany komponent Przycisk jest tworzone. Możesz używać tego przycisku w swojej aplikacji React, tak jak każdego innego komponentu React.

jak tak:

import Reagować z'reagować';
import Przycisk z'./Przycisk';
funkcjonowaćAplikacja() {
powrót (








eksportdomyślny Aplikacja;

Renderowanie Aplikacja komponent wyświetli przycisk ze stylami zdefiniowanymi w pliku Przycisk element na ekranie.

The stylizowany funkcja akceptuje również style ciągów. Wygląda inaczej niż podejście oparte na stylach obiektowych, ale działa podobnie.

import stylizowany z„@emocje/stylizowane”;
konst Przycisk = stylizowany przycisk`
 wyściółka: 0.5Rem 1rem;
 obramowanie: brak;
 rodzina czcionek: kursywa;
 promień granicy: 12piks;
 kolor: #333333;
 kolor tła: dziedziczyć;
 początek bloku marginesu: 2rem;
 koniec bloku marginesu: 2rem;


 &:unosić się {
 kolor: #e2e2e2;
 kolor tła: #333333;
 }
`
eksportdomyślny Przycisk;

Efektowna stylizacja z emocjami

Emotion to potężna biblioteka do stylizowania komponentów React, która zapewnia prosty i skuteczny sposób zarządzania stylami. Niezależnie od tego, czy jesteś początkującym, czy doświadczonym programistą, Emotion może pomóc uprościć proces stylizacji aplikacji React oraz ułatwić konserwację i skalowanie kodu.

Jeśli więc szukasz bardziej wydajnego i elastycznego sposobu na stylizowanie komponentów React, rozważ Emotion.