Emotioni teek lihtsustab CSS-i kasutamist Reactis ja lisab ka mõned käepärased süntaksifunktsioonid.

Reacti rakenduse kujundamine võib olla keeruline, eriti kui soovite oma stiile korrastada ja hooldada. Selle protsessi lihtsustamiseks pakub Emotsiooniteek CSS-i peale kõrgema taseme abstraktsiooni.

Mis on Emotsioon?

Emotion on Reacti rakenduste stiili kujundamise teek, mis pakub lihtsat ja tõhusat viisi stiilide haldamiseks. See võimaldab teil kirjutada JavaScriptis CSS-i ja pakub komponentide kujundamiseks paindlikku API-d.

Emotioni kasutamise üks peamisi eeliseid Reacti rakenduse kujundamisel on see, et see pakub tõhusamat viisi stiilide haldamiseks. Näiteks võite kasutada identseid klassinimesid mitmes komponendis, ilma et oleks oht nimetada kokkupõrkeid CSS/SASS-iga töötamisel.

Emotsiooniteek rakendab teie stiile ainult neid kasutavatele komponentidele, mitte kogu lehele. See aitab teil vältida konflikte lehe muude stiilidega ning muuta teie koodi modulaarsemaks ja korduvkasutatavamaks.

Kuidas emotsioone installida

Emotioni teegi lisamiseks oma Reacti rakendusele käivitage järgmine terminalikäsk:

npm install --save @emotion/react

Emotsiooniteek peaks nüüd olema teie projekti installitud ja valmis kasutamiseks Reacti rakenduse kujundamiseks.

Stiili kujundamine Emotioni css-i rekvisiidiga

Kui olete Emotsioonide teegi installinud, saate seda kasutada css rekvisiidid oma Reacti rakenduse kujundamiseks. The css prop sarnaneb stiilirekvisiidiga, kuna saate sellele stiile edastada stringide või tavaliste JavaScripti objektide kujul.

Rakenduse stiili loomiseks kasutage css prop, peate selle importima @emotsioon/reageerimine teeki, seejärel määrake oma stiilid:

/** @jsxImportSource @emotsioon/reageerida */
importida Reageerige alates'reageeri';
importida {css} alates'@emotsioon/reageerimine';
funktsiooniRakendus() {
tagasi (
 polsterdus: 0.5rem 1rem;
 piir: puudub;
 font-perekond: kursiiv;
 piiri raadius: 12px;
 värv: #333333;
 taustavärv: pärida;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Klõpsake Mina
 </button>
 )
}


eksportidavaikimisi Rakendus;

Koodi esimene rida, /** @jsxImportSource @emotion/react */, on konkreetne kommentaar, mille peaksite JSX-failile lisama, et näidata, et Emotioni teeki tuleks kasutada selle faili JSX-i pragmana.

JSX-is on pragma funktsioon, mis muudab JSX-i süntaksi tavaliseks JavaScriptiks. Vaikimisi kasutab React React.createElement toimib JSX pragmana. Kuid koos @jsxImportSource kommentaar, saate määrata erineva pragma.

Sel juhul on @emotsioon/reageerimine pragma käsib JSX-il kasutada jsx funktsioon Emotion teegist JSX-koodi teisendamiseks. Kui lisate JSX-failile pragma kommentaari, saate oma komponentides kasutada Emotioni teegi CSS-in-JS funktsioone.

Nupukomponent renderdab nupu mõne kohandatud stiiliga. Siin, css prop lisab nupuelemendile kohandatud stiili.

The css prop toetab ka pesastatud stiili. Pesastatud stiil võimaldab teil kirjutada stiile, mis on üksteise sees pesastatud.

Näiteks:

/** @jsxImportSource @emotsioon/reageerida */
importida Reageerige alates'reageeri';
importida {css} alates'@emotsioon/reageerimine';
funktsiooniRakendus() {
tagasi (
 polsterdus: 0.5rem 1rem;
 piir: puudub;
 font-perekond: kursiiv;
 piiri raadius: 12px;
 värv: #333333;
 taustavärv: pärida;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hõljuma{
 värv: #e2e2e2;
 taustavärv: #333333;
 }
`}>
 Klõpsake Mina
 </button>
 )
}
eksportidavaikimisi Rakendus;

Selles näites kasutab hõljutusstiili deklareerimine pesastatud stiilifunktsiooni css prop. Ülaltoodud koodiploki taust ja fondi värv muutuvad alati, kui hõljutate kursorit nupu kohal.

Objektistiilide edastamine css-i propile

The css prop aktsepteerib ka tavalisi JavaScripti objektistiile. Mitme komponendi stiili kujundamisel võimaldab objektistiilide kasutamine komponentides stiile uuesti kasutada.

Objekti stiilide edastamiseks css prop, määratlege stiilid JavaScripti objektina ja edastage see propile:

konst stiil = {
 polsterdus: "0,5 rem 1 rem",
 piir: 'mitte ükski',
 fontFamily: 'kursiivne',
 piiriraadius: "12px",
 värv: '#333333',
 taustavärv: 'pärima',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hõljuma': {
 värv: '#e2e2e2',
 taustavärv: '#333333',
 }
}
tagasi (
"rakendus">

Pange tähele, et CSS-i atribuutide nimed on sidekriipsu asemel kaamelCased. Selle põhjuseks on asjaolu, et stiilid on määratletud JavaScripti objektidena, mis kasutavad CamelCase'i nimetamise kokkuleppeid.

Stiilimine stiilitud komponentide abil

Emotsiooniteek kasutab Reacti rakenduste kujundamisel ka stiilikomponente. Stiilikomponentide kasutamine sarnaneb Reacti komponentidega, peale selle, et need sisaldavad karbist välja võetud stiile. Stiilitud komponentide loomiseks kasutate stiilis funktsiooni.

The stiilis funktsioon võimaldab teil luua korduvkasutatavaid stiiliga komponente. Et kasutada stiilis funktsioon, importige see rakendusest emotsioon/stiil raamatukogu.

Et saada @emotsioon/stiilis teek oma rakenduses, installite selle oma projekti. Seda saate teha, käivitades oma projekti terminalis järgmise käsu:

npm install @emotion/styled

Pärast installimist @emotsioon/stiilis raamatukogu, importige stiilis funktsiooni ja määratlege oma stiilid:

importida stiilis alates"@emotsioon/stiilis";
konst Button = styled.button({
 polsterdus: "0,5 rem 1 rem",
 piir: 'mitte ükski',
 fontFamily: 'kursiivne',
 piiriraadius: "12px",
 värv: '#333333',
 taustavärv: 'pärima',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&:hõljuma': {
 värv: '#e2e2e2',
 taustavärv: '#333333',
 }
})
eksportidavaikimisi Nupp;

Ülaltoodud koodiplokis stiiliga komponent Nupp on loodud. Saate seda nuppu oma Reacti rakenduses kasutada nagu mis tahes muud Reacti komponenti.

Nagu nii:

importida Reageerige alates'reageeri';
importida Nupp alates"./Button";
funktsiooniRakendus() {
tagasi (








eksportidavaikimisi Rakendus;

Renderdades Rakendus komponent kuvab nupus määratletud stiilidega Nupp komponenti ekraanil.

The stiilis funktsioon aktsepteerib ka stringistiile. See näeb välja erinev objektistiilide lähenemisviisist, kuid toimib sarnaselt.

importida stiilis alates"@emotsioon/stiilis";
konst Nupp = stiiliga.nupp`
 polsterdus: 0.5rem 1rem;
 piir: puudub;
 font-perekond: kursiiv;
 piiri raadius: 12px;
 värv: #333333;
 taustavärv: pärida;
 margin-block-start: 2rem;
 margin-block-end: 2rem;


 &:hõljuma {
 värv: #e2e2e2;
 taustavärv: #333333;
 }
`
eksportidavaikimisi Nupp;

Tõhus emotsioonidega stiil

Emotion on võimas raamatukogu Reacti komponentide kujundamiseks, mis pakub lihtsat ja tõhusat viisi stiilide haldamiseks. Olenemata sellest, kas olete algaja või kogenud arendaja, võib Emotion aidata teie Reacti rakenduse stiili kujundamist lihtsustada ning hõlbustada koodi hooldamist ja skaleerimist.

Nii et kui otsite tõhusamat ja paindlikumat viisi oma Reacti komponentide kujundamiseks, kaaluge Emotioni.