Knižnice CSS-in-JS, podobne ako štylizované komponenty, sa v posledných rokoch stali populárnejšími. Zapuzdrujú CSS až na úroveň komponentov a umožňujú vám použiť JavaScript na definovanie opakovane použiteľných štýlov.

Pomocou štylizovaných komponentov môžete udržiavať architektúru riadenú komponentmi, ktorú už React posilňuje. Knižnica má však aj nevýhody.

Ako fungujú štylizované komponenty

The štylizované komponenty Knižnica CSS-in-JS vám umožňuje písať CSS do vašich komponentov. Jeho syntax je rovnaká ako v CSS, takže je celkom ľahké ho vyzdvihnúť. Je to dokonalá stredná cesta pre vývojárov JavaScriptu, ktorí majú tendenciu držať sa ďalej od čistého CSS.

Ak chcete vidieť, ako to funguje, zvážte nasledujúci komponent Title, ktorý vykresľuje prvok h1.

konšt Názov = styled.h1`
veľkosť písma: 10,5 em;
 text-align: center;
 farba: červená;
`;

Tento komponent môžete použiť ako ktorýkoľvek iný komponent React.

konšt Domov = () => {
vrátiť (
<Názov>Štylizovaný nadpis komponentu</Title>
	)
}

Je tiež veľmi výkonný, pretože uľahčuje prácu s rekvizitami a stavom.

instagram viewer

Napríklad farba a pozadie tohto komponentu závisia od rekvizít.

importovať štylizované od "štýlové komponenty";
konšt Tlačidlo = štylizované.tlačidlo`
vypchávka: 0.8rem 1.6rem;
 farba pozadia: ${(rekvizity) => (rekvizity.primárne? "Fialová": "biely")};
 hranica: 1px pevné #00000;
 farba: ${(rekvizity) => (rekvizity.primárne? "biely": "Fialová")};
`;
exportpredvolenáfunkciuDomov() {
 vrátiť <Primárne tlačidlo>Primárny</Button>
}

So štylizovanými komponentmi nemusíte manuálne odovzdávať rekvizity do CSS. Je automaticky k dispozícii a zjednodušuje štýly písania, ktoré závisia od údajov z komponentu.

Výhody používania štylizovaných komponentov

Tu sú niektoré výhody používania knižnice štylizovaných komponentov.

Rieši problémy so špecifickosťou CSS

Štylizované komponenty eliminujú problémy so špecifickosťou, pretože zapuzdrujú CSS do komponentu. To znamená, že sa nemusíte obávať, že sa názvy tried stretnú alebo že sa vaše používateľské rozhranie zmení na neporiadok v dôsledku konfliktov názvov tried.

Umožňuje písať CSS vnútri komponentov

Ako je zrejmé z príkladu komponentu tlačidla, komponenty so štýlom vám umožňujú kombinovať CSS a JS v rovnakom súbore. Nemusíte teda vytvárať samostatný súbor CSS ani neustále prepínať zo súboru na súbor.

To je obrovská výhoda pri vytváraní zostáv používateľského rozhrania, pretože všetky funkcie komponentov ukladáte do jedného súboru.

Okrem toho písanie CSS vo vnútri komponentov. Uľahčuje zdieľanie rekvizít a stavov so štýlmi.

Umožňuje kontrolu typu

Pomocou štylizovaných komponentov môžete typom skontrolovať rekvizity a hodnoty použité vo vašich štýloch. Môžete napríklad prepísať komponent tlačidla vyššie pomocou TypeScript.

rozhranierekvizity{
 primárny: boolovská hodnota
}
const Tlačidlo = štylizované.tlačidlo<rekvizity>`
vypchávka: 0.8rem 1.6rem;
 farba pozadia: ${(rekvizity) => (rekvizity.primárne? "Fialová": "biely")};
 hranica: 1px pevné #00000;
 farba: ${(rekvizity) => (rekvizity.primárne? "biely": "Fialová")};
`;

Použitie TypeScript v komponente znamená kontrolu chýb typu pri kódovaní a skrátenie času ladenia.

Podporuje motívy hneď po vybalení

Pridáva sa tmavá téma alebo akýkoľvek iný motív vašej aplikácie môže byť zložitý a časovo náročný. Komponenty Styled však tento proces zjednodušujú. Do aplikácie môžete pridať motívy exportovaním a obalový komponent.

konšt Button = styled.main`
 farba pozadia: ${props => rekvizity.theme.light.background};
 farba: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Tlačidlo>
 Svetelné tlačidlo
</Button>
</ThemeProvider>

Komponent ThemeProvider odovzdá motívy všetkým štylizovaným komponentom, ktoré obalí. Tieto komponenty potom môžu použiť hodnoty témy vo svojich štýloch. V tomto príklade tlačidlo používa hodnoty motívu pre farby pozadia a písma.

Nevýhody používania štylizovaných komponentov

Zatiaľ čo používanie knižnice štylizovaných komponentov má veľa výhod, má aj nevýhody.

Nie je nezávislý od rámca

Písanie CSS v JS znamená, že oddelenie týchto dvoch v budúcnosti bude ťažké, čo je hrozné pre udržiavateľnosť. Napríklad, ak sa niekedy rozhodnete zmeniť svoj JavaScript framework, budete musieť prepísať väčšinu svojej kódovej základne.

Je to časovo náročné a nákladné. Použitím CSS moduly alebo nezávislá knižnica, ako napríklad emócie, je viac odolná voči budúcnosti.

Môže to byť ťažké prečítať

Rozlišovanie medzi štylizovanými komponentmi a komponentmi React môže byť ťažké, najmä mimo systému atómového dizajnu. Zvážte tento príklad:

<Hlavné>
<Nav>
<ListItem>
<LinkText>Adoptujte si zvieratko</LinkText>
</ListItem>
<ListItem>
<LinkText>Darovať</LinkText>
</ListItem>
</Nav>
<Hlavička>Adoptovať, don'nenakupujte!</Header>
<SecondaryBtn btnText="Darovať" />
</Main>

Jediný spôsob, ako zistiť, ktorý komponent obsahuje obchodnú logiku, je skontrolovať, či má rekvizity. Okrem toho, aj keď sú názvy komponentov v tomto príklade popisné, je stále ťažké si ich predstaviť.

Napríklad komponent Header môže byť nadpis, ale pokiaľ nekontrolujete štýly, možno nikdy nebudete vedieť, či ide o h1, h2 alebo h3.

Niektorí vývojári riešia tento problém iba použitím štylizovaného komponentu ako obalu a použitím sémantických HTML tagov pre prvky v ňom.

V tomto príklade môže komponent hlavičky používať značku h1.

<h1>Adoptovať, don'nenakupujte!</h1>

Môžete to posunúť ďalej definovaním štylizovaných komponentov v inom súbore (napr. styled.js), ktorý môžete neskôr importovať do komponentu React.

importovať * ako Štylizované od './styled'
// použite styled.components
<štylizované. Hlavné>
// kód
</styled.Main>

Vďaka tomu získate jasný prehľad o tom, ktoré komponenty sú štylizované a ktoré sú komponenty React.

Štylizované komponenty sú kompilované za behu

V prípade aplikácií, ktoré používajú komponenty so štýlom, prehliadač stiahne CSS a analyzuje ich pomocou JavaScriptu pred ich vložením na stránku. To spôsobuje problémy s výkonom, pretože používateľ musí stiahnuť veľa JavaScriptu pri počiatočnom načítaní.

Statické CSS je oveľa rýchlejšie. Nie je potrebné ho spracovať, kým ho prehliadač použije na úpravu stránok. Knižnica štylizovaných komponentov sa však každým vydaním zlepšuje. Ak si môžete dovoliť nejaký znížený výkon, pokračujte a použite ho.

Kedy použiť štylizované komponenty

Niektorí vývojári radi píšu CSS v súboroch JS, zatiaľ čo iní uprednostňujú samostatné súbory CSS. To, ako sa rozhodnete písať CSS, by malo v konečnom dôsledku závisieť od samotného projektu a toho, čo sa vám alebo vášmu tímu páči. Štylizované komponenty sú dobrou voľbou na vytvorenie knižnice používateľského rozhrania, pretože všetko môže byť v jednom súbore a ľahko sa exportuje a znova používa.

Ak dávate prednosť písaniu čistého CSS, použite moduly CSS. Môžete mať samostatné súbory CSS a v predvolenom nastavení sa používajú lokálne rozsahy štýlov. Bez ohľadu na to, akú voľbu si vyberiete, je dôležité mať dobré znalosti CSS.