Knižnica Emotion zjednodušuje používanie CSS v Reacte a pridáva aj niektoré užitočné funkcie syntaxe.
Úprava štýlu aplikácie React môže byť náročná, najmä ak chcete mať svoje štýly organizované a udržiavateľné. Aby sa tento proces zjednodušil, knižnica emócií poskytuje nad CSS abstrakciu vyššej úrovne.
Čo je emócia?
Emotion je knižnica pre úpravu aplikácií React, ktorá poskytuje jednoduchý a efektívny spôsob spravovania vašich štýlov. Umožňuje vám písať CSS v jazyku JavaScript a poskytuje flexibilné rozhranie API na úpravu štýlu vašich komponentov.
Jednou z hlavných výhod používania Emotion na úpravu vašej aplikácie React je, že poskytuje efektívnejší spôsob spravovania vašich štýlov. Môžete napríklad použiť identické názvy tried vo viacerých komponentoch bez rizika vzniku kolízií názvov pri práci s CSS/SASS.
Knižnica emócií aplikuje vaše štýly iba na komponenty, ktoré ich používajú, a nie na celú stránku. To vám môže pomôcť vyhnúť sa konfliktom s inými štýlmi na stránke a váš kód bude modulárnejší a opätovne použiteľný.
Ako nainštalovať emócie
Ak chcete do svojej aplikácie React pridať knižnicu emócií, spustite nasledujúci príkaz terminálu:
npm install --save @emotion/react
Knižnica Emotion by teraz mala byť nainštalovaná vo vašom projekte a pripravená na použitie na úpravu vašej aplikácie React.
Styling pomocou css Prop od Emotion
Po nainštalovaní knižnice Emotion budete môcť používať css rekvizita na úpravu vašej aplikácie React. The css rekvizita je podobná rekvizite štýlu, pretože jej môžete odovzdať štýly vo forme reťazcov alebo bežných objektov JavaScript.
Ak chcete upraviť svoju aplikáciu pomocou css prop, musíte ho importovať z @emocia/reakcia knižnicu, potom definujte svoje štýly:
/** @jsxImportSource @emócia/reagovať */
importovať Reagovať od'reagovať';
importovať {css} od'@emotion/react';funkciuApp() {
vrátiť (
vypchávka: 0.5rem 1rem;
hranica: žiadna;
font-family: kurzíva;
hraničný polomer: 12px;
farba: #333333;
farba pozadia: zdediť;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Klikni na mňa
</button>
)
}
exportpredvolená App;
Prvý riadok kódu, /** @jsxImportSource @emotion/react */, je konkrétny komentár, ktorý by ste mali pridať k súboru JSX, aby ste naznačili, že knižnica emócií by sa mala použiť ako pragma JSX pre tento súbor.
V JSX je pragma funkcia, ktorá transformuje syntax JSX na bežný JavaScript. V predvolenom nastavení React používa React.createElement fungovať ako JSX pragma. Avšak, s @jsxImportSource komentár, môžete zadať inú pragmu.
V tomto prípade, @emocia/reakcia pragma hovorí JSX, aby použil jsx z knižnice Emotion na transformáciu kódu JSX. Pridaním komentára pragma do súboru JSX môžete vo svojich komponentoch použiť funkcie CSS-in-JS knižnice emócií.
Komponent tlačidlo vykresľuje tlačidlo s určitým vlastným štýlom. Tu, css prop pridá k prvku tlačidla vlastný štýl.
The css prop tiež podporuje vnorený štýl. Vnorený štýl vám umožňuje písať štýly, ktoré sú vnorené do seba.
Napríklad:
/** @jsxImportSource @emócia/reagovať */
importovať Reagovať od'reagovať';
importovať {css} od'@emotion/react';funkciuApp() {
vrátiť (
vypchávka: 0.5rem 1rem;
hranica: žiadna;
font-family: kurzíva;
hraničný polomer: 12px;
farba: #333333;
farba pozadia: zdediť;
margin-block-start: 2rem;
margin-block-end: 2rem;&:vznášať sa{
farba: #e2e2e2;
farba pozadia: #333333;
}
`}>
Klikni na mňa
</button>
)
}
exportpredvolená App;
V tomto príklade deklarácia štýlu vznášania používa funkciu vnoreného štýlu súboru css rekvizita. Pozadie a farba písma v bloku kódu vyššie sa zmení vždy, keď umiestnite kurzor myši na tlačidlo.
Odovzdanie štýlov objektov do css Prop
The css prop tiež akceptuje bežné objektové štýly JavaScriptu. Pri úprave štýlu viacerých komponentov vám používanie štýlov objektov umožňuje opakovane použiť štýly vo vašich komponentoch.
Ak chcete odovzdať štýly objektov do css prop, definujte štýly ako objekt JavaScriptu a odovzdajte ho podpere:
konšt štýl = {
vypchávka: '0.5rem 1rem',
hranica: 'žiadny',
rodina fontov: 'kurzívne',
border Radius: '12px',
farba: '#333333',
farba pozadia: 'dediť',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:vznášať sa': {
farba: '#e2e2e2',
farba pozadia: '#333333',
}
}
vrátiť ("aplikácia">
Všimnite si, že názvy vlastností CSS sú namiesto pomlčiek označené camelCased. Je to preto, že štýly sú definované ako objekty JavaScript, ktoré používajú konvencie pomenovania camelCase.
Úprava štýlu pomocou štylizovaných komponentov
Knižnica Emotion tiež využíva štylizované komponenty pri úprave aplikácií React. Použitie štylizovaných komponentov je podobný komponentom React, okrem toho, že obsahujú štýly hneď po vybalení. Na vytvorenie štylizovaných komponentov použijete štylizované funkciu.
The štylizované funkcia umožňuje vytvárať opakovane použiteľné štylizované komponenty. Ak chcete použiť štylizované funkciu, importujte ju z emócie/štylizované knižnica.
Ak chcete získať @emotion/stylizovaný knižnice vo vašej aplikácii, nainštalujete ju do svojho projektu. Môžete to urobiť spustením nasledujúceho príkazu v termináli vášho projektu:
npm install @emotion/styled
Po inštalácii @emotion/stylizovaný knižnicu, importujte štylizované funkciu a definujte svoje štýly:
importovať štylizované od"@emotion/styled";konšt Button = styled.button({
vypchávka: '0.5rem 1rem',
hranica: 'žiadny',
rodina fontov: 'kurzívne',
border Radius: '12px',
farba: '#333333',
farba pozadia: 'dediť',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:vznášať sa': {
farba: '#e2e2e2',
farba pozadia: '#333333',
}
})
exportpredvolená Tlačidlo;
V bloku kódu vyššie, štylizovaný komponent Tlačidlo je vytvorený. Toto tlačidlo môžete použiť vo svojej aplikácii React ako ktorýkoľvek iný komponent React.
Ako:
importovať Reagovať od'reagovať';
importovať Tlačidlo od'./Button';funkciuApp() {
vrátiť (
exportpredvolená App;
Vykresľovanie App komponent zobrazí tlačidlo so štýlmi definovanými v Tlačidlo komponent na vašej obrazovke.
The štylizované funkcia tiež akceptuje štýly reťazcov. Vyzerá to inak ako pri objektových štýloch, ale funguje podobne.
importovať štylizované od"@emotion/styled";konšt Tlačidlo = štylizované.tlačidlo`
vypchávka: 0.5rem 1rem;
hranica: žiadna;
font-family: kurzíva;
hraničný polomer: 12px;
farba: #333333;
farba pozadia: zdediť;
margin-block-start: 2rem;
margin-block-end: 2rem;&:vznášať sa {
farba: #e2e2e2;
farba pozadia: #333333;
}
`
exportpredvolená Tlačidlo;
Efektívny styling s emóciami
Emotion je výkonná knižnica na úpravu komponentov React, ktorá poskytuje jednoduchý a efektívny spôsob spravovania vašich štýlov. Či už ste začiatočník alebo skúsený vývojár, Emotion vám môže pomôcť zjednodušiť proces úpravy vašej aplikácie React a uľahčiť údržbu a škálovanie kódu.
Ak teda hľadáte efektívnejší a flexibilnejší spôsob úpravy vašich komponentov React, zvážte Emotion.
