Stilizirajte svoju React.js aplikaciju koristeći Emotion

Oblikovanje React aplikacije može biti izazovno, osobito ako želite održati svoje stilove organiziranima i održavanima. Kako bi se pojednostavio ovaj proces, biblioteka Emotion pruža apstrakciju više razine povrh CSS-a.

Što je emocija?

Emotion je biblioteka za oblikovanje React aplikacija koja pruža jednostavan i učinkovit način upravljanja vašim stilovima. Omogućuje vam pisanje CSS-a u JavaScriptu i pruža fleksibilan API za stiliziranje vaših komponenti.

Jedna od glavnih prednosti korištenja Emotiona za stiliziranje vaše React aplikacije je ta što pruža učinkovitiji način upravljanja vašim stilovima. Na primjer, možete koristiti identična imena klasa u više komponenti bez rizika od sudara imenovanja koji nastaju kada radite sa CSS/SASS.

Biblioteka Emotion primjenjuje vaše stilove samo na komponente koje ih koriste, a ne na cijelu stranicu. To vam može pomoći da izbjegnete sukobe s drugim stilovima na stranici i učinite svoj kod modularnijim i višekratnim.

Kako instalirati Emotion

Da biste dodali biblioteku Emotion svojoj React aplikaciji, pokrenite sljedeću naredbu terminala:

npm install --save @emotion/react

Biblioteka Emotion sada bi trebala biti instalirana u vašem projektu i spremna za korištenje za stiliziranje vaše React aplikacije.

Stiliziranje koristeći Emotionov css Prop

Nakon što instalirate biblioteku Emotion, moći ćete koristiti css prop za stiliziranje vaše React aplikacije. The css prop je sličan style prop-u jer mu možete proslijediti stilove u obliku nizova ili običnih JavaScript objekata.

Da biste stilizirali svoju aplikaciju pomoću css prop, morate ga uvesti iz @emocija/reagiraj knjižnici, zatim definirajte svoje stilove:

/** @jsxImportSource @emocija/reagirati */
uvoz Reagirati iz'reagirati';
uvoz {css} iz'@emotion/react';
funkcijaaplikacija() {
povratak (
 padding: 0.5rem 1rem;
 granica: nema;
 obitelj-fontova: kurziv;
 radijus granice: 12px;
 boja: #333333;
 boja pozadine: naslijediti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Kliknite Ja
 </button>
 )
}
izvozzadano aplikacija;

Prvi red koda, /** @jsxImportSource @emotion/react */, poseban je komentar koji biste trebali dodati JSX datoteci kako biste naznačili da bi se biblioteka Emotion trebala koristiti kao JSX pragma za tu datoteku.

U JSX-u, pragma je funkcija koja transformira JSX sintaksu u uobičajeni JavaScript. Prema zadanim postavkama, React koristi React.createElement funkcionirati kao JSX pragma. Međutim, s @jsxImportSource komentar, možete navesti drugu pragmu.

U ovom slučaju, @emocija/reagiraj pragma govori JSX-u da koristi jsx funkciju iz biblioteke Emotion za transformaciju JSX koda. Dodavanjem pragma komentara JSX datoteci možete koristiti značajke CSS-in-JS biblioteke Emotion u svojim komponentama.

Komponenta gumba prikazuje gumb s nekim prilagođenim stilom. Evo, css prop dodaje prilagođeni stil elementu gumba.

The css prop također podržava ugniježđeni stil. Ugniježđeni stil vam omogućuje pisanje stilova koji su ugniježđeni jedan u drugi.

Na primjer:

/** @jsxImportSource @emocija/reagirati */
uvoz Reagirati iz'reagirati';
uvoz {css} iz'@emotion/react';
funkcijaaplikacija() {
povratak (
 padding: 0.5rem 1rem;
 granica: nema;
 obitelj-fontova: kurziv;
 radijus granice: 12px;
 boja: #333333;
 boja pozadine: naslijediti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:lebdjeti{
 boja: #e2e2e2;
 boja pozadine: #333333;
 }
`}>
 Kliknite Ja
 </button>
 )
}
izvozzadano aplikacija;

U ovom primjeru, deklaracija stila lebdenja koristi značajku ugniježđenog stila css oslonac Boja pozadine i fonta u gornjem bloku koda promijenit će se kad god prijeđete pokazivačem iznad gumba.

Prosljeđivanje stilova objekata u css Prop

The css prop također prihvaća regularne stilove JavaScript objekata. Kada stilizirate nekoliko komponenti, korištenje stilova objekata omogućuje vam ponovnu upotrebu stilova u vašim komponentama.

Za prosljeđivanje stilova objekata u css prop, definirajte stilove kao JavaScript objekt i proslijedite ga prop:

konst stil = {
 padding: '0,5 rem 1 rem',
 granica: 'ništa',
 fontFamily: 'rukopisni',
 radijus granice: '12px',
 boja: '#333333',
 boja pozadine: 'naslijediti',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:lebdjeti': {
 boja: '#e2e2e2',
 boja pozadine: '#333333',
 }
}
povratak (
"aplikacija">
Kliknite Me</button>
 </div>
);

Imajte na umu da su imena CSS svojstava pisana velikim i velikim slovima umjesto sa crticom. To je zato što su stilovi definirani kao JavaScript objekti, koji koriste konvencije imenovanja camelCase.

Stiliziranje pomoću stiliziranih komponenti

Biblioteka Emotion također koristi stilizirane komponente pri oblikovanju React aplikacija. Korištenje stiliziranih komponenti je sličan React komponentama, osim činjenice da sadrže stilove izvan okvira. Za izradu stiliziranih komponenti upotrijebit ćete stilizirani funkcija.

The stilizirani funkcija vam omogućuje stvaranje stiliziranih komponenti za višekratnu upotrebu. Za korištenje stilizirani funkciju, uvezite je iz emocija/stil knjižnica.

Da biste dobili @emocija/stilizirano biblioteku u svojoj aplikaciji, instalirat ćete je u svoj projekt. To možete učiniti pokretanjem sljedeće naredbe u terminalu vašeg projekta:

npm instalirajte @emotion/styled

Nakon instaliranja @emocija/stilizirano knjižnica, uvezi stilizirani funkcionirati i definirati svoje stilove:

uvoz stilizirani iz"@emotion/styled";
konst Button = styled.button({
 padding: '0,5 rem 1 rem',
 granica: 'ništa',
 fontFamily: 'rukopisni',
 radijus granice: '12px',
 boja: '#333333',
 boja pozadine: 'naslijediti',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:lebdjeti': {
 boja: '#e2e2e2',
 boja pozadine: '#333333',
 }
})
izvozzadano Dugme;

U gornjem bloku koda, stilizirana komponenta Dugme se stvara. Ovaj gumb možete koristiti u svojoj React aplikaciji kao bilo koju drugu React komponentu.

ovako:

uvoz Reagirati iz'reagirati';
uvoz Dugme iz'./Dugme';
funkcijaaplikacija() {
povratak (



Kliknite Me</Button>
 </div>
 );
}

izvozzadano aplikacija;

Prikaz aplikacija komponenta će prikazati gumb sa stilovima definiranim u Dugme komponentu na vašem ekranu.

The stilizirani funkcija također prihvaća stilove nizova. Izgleda drugačije od pristupa stilova objekata, ali funkcionira slično.

uvoz stilizirani iz"@emotion/styled";
konst Button = styled.button`
 padding: 0.5rem 1rem;
 granica: nema;
 obitelj-fontova: kurziv;
 radijus granice: 12px;
 boja: #333333;
 boja pozadine: naslijediti;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover {
 boja: #e2e2e2;
 boja pozadine: #333333;
 }
`
izvozzadano Dugme;

Učinkovit stil s emocijama

Emotion je moćna biblioteka za oblikovanje React komponenti koja pruža jednostavan i učinkovit način upravljanja vašim stilovima. Bilo da ste početnik ili iskusan programer, Emotion vam može pomoći da pojednostavite proces oblikovanja vaše React aplikacije i olakšate održavanje i skaliranje vašeg koda.

Dakle, ako tražite učinkovitiji i fleksibilniji način stiliziranja svojih React komponenti, razmislite o Emotionu.