Oblikovanje vaše aplikacije React.js z uporabo Emotion

Slogiranje aplikacije React je lahko izziv, še posebej, če želite ohraniti svoje sloge organizirane in vzdržljive. Za pomoč pri poenostavitvi tega postopka knjižnica Emotion nudi abstrakcijo višje ravni poleg CSS.

Kaj je čustvo?

Emotion je knjižnica za oblikovanje aplikacij React, ki zagotavlja preprost in učinkovit način za upravljanje vaših stilov. Omogoča vam pisanje CSS v JavaScriptu in nudi prilagodljiv API za oblikovanje vaših komponent.

Ena od glavnih prednosti uporabe Emotion za oblikovanje vaše aplikacije React je, da zagotavlja učinkovitejši način za upravljanje vaših stilov. Uporabite lahko na primer enaka imena razredov v več komponentah, ne da bi pri tem prišlo do kolizij pri poimenovanju pri delu s CSS/SASS.

Knjižnica Emotion uporabi vaše sloge samo za komponente, ki jih uporabljajo, in ne za celotno stran. To vam lahko pomaga preprečiti konflikte z drugimi slogi na strani in naredi vašo kodo bolj modularno in ponovno uporabno.

Kako namestiti Emotion

Če želite svoji aplikaciji React dodati knjižnico Emotion, zaženite naslednji terminalski ukaz:

npm install --save @emotion/react

Knjižnica Emotion bi morala biti zdaj nameščena v vašem projektu in pripravljena za uporabo za oblikovanje vaše aplikacije React.

Oblikovanje z uporabo Emotion css Prop

Ko namestite knjižnico Emotion, boste lahko uporabljali css prop za oblikovanje vaše aplikacije React. The css prop je podoben slogu prop, saj mu lahko posredujete sloge v obliki nizov ali navadnih objektov JavaScript.

Če želite oblikovati svojo aplikacijo z uporabo css prop, ga morate uvoziti iz @emotion/react knjižnico, nato določite svoje sloge:

/** @jsxImportSource @čustvo/reagiraj */
uvoz Reagiraj od'reagirati';
uvoz {css} od'@emotion/react';
funkcijoaplikacija() {
vrnitev (
 oblazinjenje: 0.5rem 1rem;
 meja: brez;
 družina pisav: kurziv;
 mejni polmer: 12px;
 barva: #333333;
 barva ozadja: dedovanje;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Kliknite Jaz
 </button>
 )
}
izvozprivzeto aplikacija;

Prva vrstica kode, /** @jsxImportSource @emotion/react */, je poseben komentar, ki bi ga morali dodati datoteki JSX, da označite, da je treba knjižnico Emotion uporabiti kot pragmo JSX za to datoteko.

V JSX je pragma funkcija, ki pretvori sintakso JSX v običajni JavaScript. React privzeto uporablja React.createElement deluje kot pragma JSX. Vendar pa z @jsxImportSource komentar, lahko določite drugačno pragmo.

V tem primeru je @emotion/react pragma pove JSX, naj uporabi jsx funkcijo iz knjižnice Emotion za pretvorbo kode JSX. Če datoteki JSX dodate komentar pragma, lahko v svojih komponentah uporabite funkcije CSS-in-JS knjižnice Emotion.

Komponenta gumba upodobi gumb z določenim slogom po meri. Tukaj, css prop doda elementu gumba slog po meri.

The css prop podpira tudi ugnezdeni stil. Ugnezdeni slog vam omogoča pisanje slogov, ki so ugnezdeni drug v drugem.

Na primer:

/** @jsxImportSource @čustvo/reagiraj */
uvoz Reagiraj od'reagirati';
uvoz {css} od'@emotion/react';
funkcijoaplikacija() {
vrnitev (
 oblazinjenje: 0.5rem 1rem;
 meja: brez;
 družina pisav: kurziv;
 mejni polmer: 12px;
 barva: #333333;
 barva ozadja: dedovanje;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover{
 barva: #e2e2e2;
 Barva ozadja: #333333;
 }
`}>
 Kliknite Jaz
 </button>
 )
}
izvozprivzeto aplikacija;

V tem primeru deklaracija sloga lebdenja uporablja ugnezdeno funkcijo sloga css prop. Barva ozadja in pisave v zgornjem bloku kode se bosta spremenili vsakič, ko premaknete miškin kazalec nad gumb.

Posredovanje slogov predmetov v css Prop

The css prop sprejema tudi običajne sloge objektov JavaScript. Ko stilizirate več komponent, vam uporaba slogov predmetov omogoča ponovno uporabo slogov v vaših komponentah.

Za posredovanje slogov predmetov v css prop, definirajte sloge kot objekt JavaScript in ga posredujte prop:

konst slog = {
 oblazinjenje: '0,5 rem 1 rem',
 meja: 'brez',
 fontFamily: 'kurziv',
 borderRadius: '12px',
 barva: '#333333',
 Barva ozadja: 'podedovati',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hover': {
 barva: '#e2e2e2',
 Barva ozadja: '#333333',
 }
}
vrnitev (
"aplikacija">
Kliknite Me</button>
 </div>
);

Upoštevajte, da so imena lastnosti CSS napisana z velikimi črkami namesto z vezajem. Razlog za to je, da so slogi definirani kot objekti JavaScript, ki uporabljajo pravila poimenovanja v obliki kamelje črke.

Slogiranje z uporabo stiliziranih komponent

Knjižnica Emotion uporablja tudi stilizirane komponente pri oblikovanju aplikacij React. Uporaba stiliziranih komponent je podoben komponentam React, razen dejstva, da vsebujejo sloge takoj po namestitvi. Za ustvarjanje stiliziranih komponent boste uporabili stilizirano funkcijo.

The stilizirano omogoča ustvarjanje stiliziranih komponent za večkratno uporabo. Za uporabo stilizirano funkcijo, jo uvozite iz čustvo/slog knjižnica.

Da bi dobili @emotion/styled knjižnico v vaši aplikaciji, jo boste namestili v svoj projekt. To lahko storite tako, da v terminalu svojega projekta zaženete naslednji ukaz:

npm namestite @emotion/styled

Po namestitvi @emotion/styled knjižnico, uvozite stilizirano funkcijo in določite svoje sloge:

uvoz stilizirano od"@emotion/styled";
konst Button = styled.button({
 oblazinjenje: '0,5 rem 1 rem',
 meja: 'brez',
 fontFamily: 'kurziv',
 borderRadius: '12px',
 barva: '#333333',
 Barva ozadja: 'podedovati',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:hover': {
 barva: '#e2e2e2',
 Barva ozadja: '#333333',
 }
})
izvozprivzeto gumb;

V zgornjem bloku kode stilizirana komponenta Gumb je ustvarjen. Ta gumb lahko uporabite v svoji aplikaciji React kot katero koli drugo komponento React.

takole:

uvoz Reagiraj od'reagirati';
uvoz Gumb od'./Gumb';
funkcijoaplikacija() {
vrnitev (



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

izvozprivzeto aplikacija;

Upodabljanje aplikacija bo prikazal gumb s slogi, definiranimi v Gumb komponento na vašem zaslonu.

The stilizirano funkcija sprejema tudi sloge nizov. Videti je drugače kot pristop slogov objektov, vendar deluje podobno.

uvoz stilizirano od"@emotion/styled";
konst Gumb = styled.button`
 oblazinjenje: 0.5rem 1rem;
 meja: brez;
 družina pisav: kurziv;
 mejni polmer: 12px;
 barva: #333333;
 barva ozadja: dedovanje;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover {
 barva: #e2e2e2;
 Barva ozadja: #333333;
 }
`
izvozprivzeto gumb;

Učinkovito oblikovanje s čustvi

Emotion je zmogljiva knjižnica za oblikovanje komponent React, ki zagotavlja preprost in učinkovit način za upravljanje vaših slogov. Ne glede na to, ali ste začetnik ali izkušen razvijalec, lahko Emotion pomaga poenostaviti postopek oblikovanja vaše aplikacije React ter olajša vzdrževanje in prilagajanje kode.

Torej, če iščete bolj učinkovit in prilagodljiv način za oblikovanje komponent React, razmislite o Emotion.