Knihovna Emotion zjednodušuje používání CSS v Reactu a přidává také některé užitečné funkce syntaxe.
Stylování aplikace React může být náročné, zvláště pokud chcete mít své styly organizované a udržovatelné. Pro zjednodušení tohoto procesu poskytuje knihovna Emotion nad CSS abstrakci vyšší úrovně.
Co je to emoce?
Emotion je knihovna pro styling aplikací React, která poskytuje jednoduchý a efektivní způsob správy vašich stylů. Umožňuje vám psát CSS v JavaScriptu a poskytuje flexibilní API pro stylování vašich komponent.
Jednou z hlavních výhod používání Emotion ke stylování aplikace React je to, že poskytuje efektivnější způsob správy vašich stylů. Můžete například použít identické názvy tříd ve více komponentách bez rizika kolizí pojmenování při práci s CSS/SASS.
Knihovna emocí aplikuje vaše styly pouze na komponenty, které je používají, nikoli na celou stránku. To vám pomůže vyhnout se konfliktům s jinými styly na stránce a váš kód bude modulárnější a znovu použitelný.
Jak nainstalovat Emotion
Chcete-li do aplikace React přidat knihovnu Emotion, spusťte následující příkaz terminálu:
npm install --save @emotion/react
Knihovna Emotion by nyní měla být nainstalována ve vašem projektu a připravena k použití ke stylování vaší aplikace React.
Styling pomocí Emotion css Prop
Jakmile nainstalujete knihovnu Emotion, budete moci používat css podpěra pro styl vaší aplikace React. The css prop je podobný stylu prop, protože mu můžete předávat styly ve formě řetězců nebo běžných objektů JavaScriptu.
Chcete-li upravit styl aplikace pomocí css prop, musíte jej importovat z @emoce/reakce knihovny a poté definujte své styly:
/** @jsxImportSource @emoce/reagovat */
import Reagovat z'reagovat';
import {css} z'@emotion/react';funkceAplikace() {
vrátit se (
vycpávka: 0.5rem 1rem;
hranice: žádná;
font-family: cursive;
okraj-poloměr: 12px;
barva: #333333;
barva pozadí: zdědit;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Klikni na mě
</button>
)
}
vývoznívýchozí Aplikace;
První řádek kódu, /** @jsxImportSource @emotion/react */, je konkrétní komentář, který byste měli přidat k souboru JSX, abyste označili, že knihovna Emotion by měla být použita jako pragma JSX pro tento soubor.
V JSX je pragma funkce, která transformuje syntaxi JSX na běžný JavaScript. Ve výchozím nastavení React používá React.createElement fungovat jako JSX pragma. Nicméně, s @jsxImportSource komentář, můžete zadat jiné pragma.
V tomto případě je @emoce/reakce pragma říká JSX, aby použil jsx funkce z knihovny Emotion k transformaci kódu JSX. Přidáním komentáře pragma do souboru JSX můžete ve svých komponentách použít funkce CSS-in-JS knihovny Emotion.
Komponenta tlačítka vykreslí tlačítko s určitým vlastním stylem. Tady, css prop přidá vlastní styl prvku tlačítka.
The css prop také podporuje vnořený styl. Vnořené styly vám umožňují psát styly, které jsou vnořené do sebe.
Například:
/** @jsxImportSource @emoce/reagovat */
import Reagovat z'reagovat';
import {css} z'@emotion/react';funkceAplikace() {
vrátit se (
vycpávka: 0.5rem 1rem;
hranice: žádná;
font-family: cursive;
okraj-poloměr: 12px;
barva: #333333;
barva pozadí: zdědit;
margin-block-start: 2rem;
margin-block-end: 2rem;&:vznášet se{
barva: #e2e2e2;
barva pozadí: #333333;
}
`}>
Klikni na mě
</button>
)
}
vývoznívýchozí Aplikace;
V tomto příkladu používá deklarace stylu přechodu funkci vnořeného stylu css podpěra. Pozadí a barva písma v bloku kódu výše se změní, kdykoli na tlačítko najedete.
Předávání objektových stylů do css Prop
The css prop také přijímá běžné objektové styly JavaScriptu. Při stylování několika komponent vám použití stylů objektů umožňuje znovu použít styly ve vašich komponentách.
Chcete-li předat styly objektů do css prop, definujte styly jako objekt JavaScriptu a předejte jej prop:
konst styl = {
vycpávka: '0.5rem 1rem',
okraj: 'žádný',
fontFamily: 'kurzívní',
okrajRadius: '12px',
barva: '#333333',
barva pozadí: 'zdědit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:vznášet se': {
barva: '#e2e2e2',
barva pozadí: '#333333',
}
}
vrátit se ("aplikace">
Všimněte si, že názvy vlastností CSS jsou místo pomlčky označeny camelCased. Je to proto, že styly jsou definovány jako objekty JavaScript, které používají konvence pojmenování camelCase.
Styling pomocí stylizovaných komponent
Knihovna Emotion také využívá stylizované komponenty při vytváření stylů aplikací React. Použití stylizovaných komponent je podobný komponentám React, kromě toho, že obsahují styly po vybalení. Chcete-li vytvořit stylizované komponenty, použijete stylizovaný funkce.
The stylizovaný Funkce umožňuje vytvářet opakovaně použitelné stylizované komponenty. Chcete-li použít stylizovaný funkci importujte z emoce/stylizovaný knihovna.
Chcete-li získat @emoce/stylizovaný knihovny ve vaší aplikaci, nainstalujete ji do svého projektu. Můžete to provést spuštěním následujícího příkazu v terminálu vašeho projektu:
npm install @emotion/styled
Po instalaci @emoce/stylizovaný knihovny, importujte stylizovaný fungovat a definovat své styly:
import stylizovaný z"@emoce/stylovaný";konst Button = styled.button({
vycpávka: '0.5rem 1rem',
okraj: 'žádný',
fontFamily: 'kurzívní',
okrajRadius: '12px',
barva: '#333333',
barva pozadí: 'zdědit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem','&:vznášet se': {
barva: '#e2e2e2',
barva pozadí: '#333333',
}
})
vývoznívýchozí Knoflík;
V bloku kódu výše stylizovaná komponenta Knoflík je vytvořen. Toto tlačítko můžete použít ve své aplikaci React jako kteroukoli jinou komponentu React.
Jako tak:
import Reagovat z'reagovat';
import Knoflík z'./Knoflík';funkceAplikace() {
vrátit se (
vývoznívýchozí Aplikace;
Vykreslování Aplikace komponenta zobrazí tlačítko se styly definovanými v Knoflík komponentu na vaší obrazovce.
The stylizovaný funkce také přijímá styly řetězců. Vypadá to jinak než u objektových stylů, ale funguje podobně.
import stylizovaný z"@emoce/stylovaný";konst Tlačítko = stylizované.tlačítko`
vycpávka: 0.5rem 1rem;
hranice: žádná;
font-family: cursive;
okraj-poloměr: 12px;
barva: #333333;
barva pozadí: zdědit;
margin-block-start: 2rem;
margin-block-end: 2rem;&:hover {
barva: #e2e2e2;
barva pozadí: #333333;
}
`
vývoznívýchozí Knoflík;
Efektivní styling s emocemi
Emotion je výkonná knihovna pro styling komponent React, která poskytuje jednoduchý a efektivní způsob správy vašich stylů. Ať už jste začátečník nebo zkušený vývojář, Emotion vám může pomoci zjednodušit proces stylování vaší aplikace React a usnadnit údržbu a škálování vašeho kódu.
Pokud tedy hledáte efektivnější a flexibilnější způsob stylování komponent React, zvažte Emotion.
