Stilizarea aplicației dvs. React.js folosind Emotion

Stilizarea unei aplicații React poate fi o provocare, mai ales dacă doriți să vă păstrați stilurile organizate și întreținute. Pentru a ajuta la simplificarea acestui proces, biblioteca Emotion oferă o abstractizare de nivel superior pe partea superioară a CSS.

Ce este Emoția?

Emotion este o bibliotecă pentru aplicațiile React de styling care oferă o modalitate simplă și eficientă de a vă gestiona stilurile. Vă permite să scrieți CSS în JavaScript și oferă un API flexibil pentru stilul componentelor dvs.

Unul dintre principalele avantaje ale utilizării Emotion pentru a vă stila aplicația React este că oferă o modalitate mai eficientă de a vă gestiona stilurile. De exemplu, puteți utiliza nume de clasă identice în mai multe componente fără riscul de apariție a coliziunilor de denumire atunci când lucrați cu CSS/SASS.

Biblioteca Emotion vă aplică stilurile numai componentelor care le folosesc, mai degrabă decât întregii pagini. Acest lucru vă poate ajuta să evitați conflictele cu alte stiluri de pe pagină și să faceți codul mai modular și mai reutilizabil.

Cum se instalează Emotion

Pentru a adăuga biblioteca Emotion la aplicația React, rulați următoarea comandă de terminal:

npm install --save @emotion/react

Biblioteca Emotion ar trebui să fie acum instalată în proiectul dvs. și gata de utilizare pentru a vă stila aplicația React.

Stilizarea utilizând prop. css de la Emotion

După ce ați instalat biblioteca Emotion, veți putea folosi css prop pentru a vă stila aplicația React. The css prop este similar cu stilul prop, deoarece îi puteți transmite stiluri sub formă de șiruri de caractere sau obiecte JavaScript obișnuite.

Pentru a vă stila aplicația folosind css prop, trebuie să-l importați din @emoție/reacție bibliotecă, apoi definiți-vă stilurile:

/** @jsxImportSource @emoţie/reacționează */
import Reacţiona din'reacţiona';
import {css} din„@emoție/reacție”;
funcţieApp() {
întoarcere (
 umplutura: 0.5rem 1rem;
 chenar: niciunul;
 familie de fonturi: cursiv;
 raza de frontieră: 12px;
 culoare: #333333;
 culoare de fundal: moștenire;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Faceți clic pe Mine
 </button>
 )
}
exportMod implicit Aplicație;

Prima linie de cod, /** @jsxImportSource @emotion/react */, este un comentariu special pe care ar trebui să-l adăugați la fișierul JSX pentru a indica faptul că biblioteca Emotion ar trebui utilizată ca pragma JSX pentru acel fișier.

În JSX, o pragma este o funcție care transformă sintaxa JSX în JavaScript obișnuit. În mod implicit, React utilizează React.createElement funcționează ca pragma JSX. Cu toate acestea, cu @jsxImportSource comentariu, puteți specifica o pragma diferită.

În acest caz, @emoție/reacție pragma îi spune JSX să folosească jsx funcția din biblioteca Emotion pentru a transforma codul JSX. Adăugând comentariul pragma la un fișier JSX, puteți utiliza caracteristicile CSS-in-JS ale bibliotecii Emotion în componentele dvs.

Componenta butonului redă un buton cu un stil personalizat. Aici css prop adaugă stilul personalizat elementului buton.

The css prop acceptă, de asemenea, stilul imbricat. Stilul imbricat vă permite să scrieți stiluri care sunt imbricate unul în celălalt.

De exemplu:

/** @jsxImportSource @emoţie/reacționează */
import Reacţiona din'reacţiona';
import {css} din„@emoție/reacție”;
funcţieApp() {
întoarcere (
 umplutura: 0.5rem 1rem;
 chenar: niciunul;
 familie de fonturi: cursiv;
 raza de frontieră: 12px;
 culoare: #333333;
 culoare de fundal: moștenire;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:planare{
 culoare: #e2e2e2;
 culoare de fundal: #333333;
 }
`}>
 Faceți clic pe Mine
 </button>
 )
}
exportMod implicit Aplicație;

În acest exemplu, declarația stilului hover folosește caracteristica de stil imbricată a css recuzită. Fundalul și culoarea fontului din blocul de cod de mai sus se vor schimba ori de câte ori treceți cursorul peste buton.

Transmiterea stilurilor de obiecte la prop. css

The css prop acceptă și stiluri de obiect JavaScript obișnuite. Atunci când stilați mai multe componente, utilizarea stilurilor de obiect vă permite să reutilizați stilurile în componente.

Pentru a transmite stiluri de obiecte către css prop, definiți stilurile ca obiect JavaScript și transmiteți-l la prop:

const stil = {
 umplutura: „0,5 rem 1 rem”,
 frontieră: 'nici unul',
 familie de fonturi: 'cursiv',
 borderRadius: „12px”,
 culoare: '#333333',
 culoare de fundal: 'moşteni',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:planare': {
 culoare: „#e2e2e2”,
 culoare de fundal: '#333333',
 }
}
întoarcere (
„aplicație”>
Faceți clic pe mine</button>
 </div>
);

Rețineți că numele proprietăților CSS sunt camelCsed în loc de cratime. Acest lucru se datorează faptului că stilurile sunt definite ca obiecte JavaScript, care utilizează convențiile de denumire camelCase.

Stilizarea utilizând componentele stilizate

Biblioteca Emotion folosește, de asemenea, componente stilate atunci când modelează aplicațiile React. Folosind componente stilizate este similar cu componentele React, în afară de faptul că conțin stiluri ieșite din cutie. Pentru a crea componente stilizate, veți folosi stilizat funcţie.

The stilizat funcția vă permite să creați componente cu stil reutilizabile. Pentru a utiliza stilizat funcția, importați-o din emotie/stilizat bibliotecă.

Pentru a obține @emotion/styled biblioteca din aplicația dvs., o veți instala în proiectul dvs. Puteți face acest lucru rulând următoarea comandă în terminalul proiectului dvs.:

npm install @emotion/styled

După instalarea @emotion/styled bibliotecă, importați stilizat funcţionează şi defineşte stilurile tale:

import stilizat din„@emotion/styled”;
const Button = stilat.button({
 umplutura: „0,5 rem 1 rem”,
 frontieră: 'nici unul',
 familie de fonturi: 'cursiv',
 borderRadius: „12px”,
 culoare: '#333333',
 culoare de fundal: 'moşteni',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:planare': {
 culoare: „#e2e2e2”,
 culoare de fundal: '#333333',
 }
})
exportMod implicit Buton;

În blocul de cod de mai sus, o componentă cu stil Buton este creat. Puteți utiliza acest buton în aplicația dvs. React ca orice altă componentă React.

Ca astfel:

import Reacţiona din'reacţiona';
import Buton din'./Buton';
funcţieApp() {
întoarcere (



Faceți clic pe mine</Button>
 </div>
 );
}

exportMod implicit Aplicație;

Redarea App componenta va afișa un buton cu stilurile definite în Buton componentă de pe ecran.

The stilizat funcția acceptă și stiluri de șir. Arată diferit de abordarea stilurilor de obiect, dar funcționează în mod similar.

import stilizat din„@emotion/styled”;
const Button = stilat.button`
 umplutura: 0.5rem 1rem;
 chenar: niciunul;
 familie de fonturi: cursiv;
 raza de frontieră: 12px;
 culoare: #333333;
 culoare de fundal: moștenire;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover {
 culoare: #e2e2e2;
 culoare de fundal: #333333;
 }
`
exportMod implicit Buton;

Styling eficient cu emoție

Emotion este o bibliotecă puternică pentru stilarea componentelor React, care oferă o modalitate simplă și eficientă de a vă gestiona stilurile. Indiferent dacă sunteți un începător sau un dezvoltator cu experiență, Emotion vă poate ajuta la simplificarea procesului de stilare a aplicației dvs. React și la facilitarea întreținerii și scalarii codului.

Deci, dacă sunteți în căutarea unui mod mai eficient și mai flexibil de a vă stila componentele React, luați în considerare Emotion.