Knihovny CSS-in-JS, stejně jako stylované komponenty, se v posledních letech staly populárnějšími. Zapouzdřují CSS až na úroveň komponent a umožňují používat JavaScript k definování opakovaně použitelných stylů.

Pomocí stylizovaných komponent můžete udržovat architekturu řízenou komponentami, kterou React již posiluje. Ale knihovna má i své nevýhody.

Jak stylové komponenty fungují

The stylové komponenty Knihovna CSS-in-JS vám umožňuje psát CSS do vašich dílčích souborů. Jeho syntaxe je stejná jako u CSS, takže je docela snadné jej vyzvednout. Je to perfektní střední cesta pro vývojáře JavaScriptu, kteří mají tendenci vyhýbat se čistému CSS.

Chcete-li vidět, jak to funguje, zvažte následující komponentu Title, která vykresluje prvek h1.

konst Název = styled.h1`
velikost písma: 10,5 em;
 text-align: center;
 červená barva;
`;

Tuto komponentu můžete použít jako kteroukoli jinou komponentu React.

konst Home = () => {
vrátit se (
<Titul>Stylizovaný nadpis komponenty</Title>
	)
}

Je také velmi výkonný, protože usnadňuje práci s rekvizitami a stavem.

Například barva a pozadí tohoto komponentu závisí na rekvizitách.

import stylizovaný z "styled-components";
konst Tlačítko = stylizované.tlačítko`
vycpávka: 0.8rem 1.6rem;
 barva pozadí: ${(rekvizity) => (rekvizity.primární? "nachový": "bílý")};
 okraj: 1px pevné #00000;
 barva: ${(rekvizity) => (rekvizity.primární? "bílý": "nachový")};
`;
vývoznívýchozífunkceDomov() {
 vrátit se <Primární tlačítko>Hlavní</Button>
}

Se stylizovanými komponentami nemusíte ručně předávat rekvizity do CSS. Je automaticky k dispozici a zjednodušuje styly psaní, které závisí na datech z komponenty.

Výhody použití stylových komponent

Zde jsou některé výhody použití knihovny stylových komponent.

Řeší problémy se specifičností CSS

Stylizované komponenty eliminují problémy se specificitou, protože zapouzdřují CSS uvnitř komponenty. To znamená, že se nemusíte bát, že se názvy tříd budou střetávat nebo že se vaše uživatelské rozhraní změní v nepořádek kvůli kolizím názvů tříd.

Umožňuje psát CSS uvnitř komponent

Jak je vidět z příkladu komponenty tlačítka, styled-components umožňuje kombinovat CSS a JS ve stejném souboru. Nemusíte tedy vytvářet samostatný soubor CSS ani neustále přepínat ze souboru na soubor.

To je obrovská výhoda při vytváření UI kitů, protože všechny funkce komponent uložíte do jednoho souboru.

Kromě toho psaní CSS uvnitř komponent. Usnadňuje sdílení rekvizit a stavů se styly.

Umožňuje kontrolu typu

Se stylizovanými komponentami můžete typově zkontrolovat rekvizity a hodnoty použité ve vašich stylech. Výše uvedenou komponentu tlačítka můžete například přepsat pomocí TypeScriptu.

rozhranírekvizity{
 hlavní: booleovský
}
const Tlačítko = stylizované.tlačítko<rekvizity>`
vycpávka: 0.8rem 1.6rem;
 barva pozadí: ${(rekvizity) => (rekvizity.primární? "nachový": "bílý")};
 okraj: 1px pevné #00000;
 barva: ${(rekvizity) => (rekvizity.primární? "bílý": "nachový")};
`;

Použití TypeScript v komponentě znamená kontrolu chyb typu při psaní kódu a zkrácení doby ladění.

Podporuje tématiku ihned po vybalení

Přidání tmavého motivu nebo jakékoli jiné téma vaší aplikace může být obtížné a časově náročné. Komponenty Styled však proces zjednodušují. Motivy můžete do aplikace přidat exportováním a komponenta obalu.

konst Tlačítko = styled.main`
 barva pozadí: ${props => rekvizity.theme.light.background};
 barva: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Knoflík>
 Světlo tlačítko
</Button>
</ThemeProvider>

Komponenta ThemeProvider předává motivy všem stylizovaným komponentám, které obaluje. Tyto komponenty pak mohou použít hodnoty motivu ve svých stylech. V tomto příkladu tlačítko používá hodnoty motivu pro barvy pozadí a písma.

Nevýhody používání stylizovaných komponent

I když používání knihovny stylových komponent má mnoho výhod, má také nevýhody.

Není to nezávislé na frameworku

Psaní CSS v JS znamená, že oddělení těchto dvou v budoucnu bude obtížné, což je hrozné pro udržovatelnost. Například pokud se někdy rozhodnete změnit svůj JavaScriptový rámec, budete muset přepsat většinu své kódové základny.

To je časově náročné a nákladné. Použitím CSS moduly nebo nezávislá knihovna, jako jsou emoce, je odolnější vůči budoucnosti.

Může to být těžké přečíst

Rozlišení mezi stylovanými a React komponentami může být obtížné, zvláště mimo systém atomového designu. Zvažte tento příklad:

<Hlavní>
<Nav>
<ListItem>
<LinkText>Adoptujte si mazlíčka</LinkText>
</ListItem>
<ListItem>
<LinkText>Darovat</LinkText>
</ListItem>
</Nav>
<Záhlaví>Přijmout, don't nakupovat!</Header>
<SecondaryBtn btnText="Darovat" />
</Main>

Jediný způsob, jak zjistit, která komponenta obsahuje obchodní logiku, je zkontrolovat, zda má rekvizity. Navíc, i když jsou názvy komponent v tomto příkladu popisné, je stále obtížné si je představit.

Komponenta Header může být například nadpis, ale pokud nezkontrolujete styly, nikdy nebudete vědět, zda se jedná o h1, h2 nebo h3.

Někteří vývojáři řeší tento problém tak, že stylizovanou komponentu používají pouze jako obal a pro prvky v ní používají sémantické HTML tagy.

V tomto příkladu může komponenta záhlaví používat značku h1.

<h1>Přijmout, don't nakupovat!</h1>

Můžete to udělat dále tím, že definujete stylizované komponenty v jiném souboru (např. styled.js), který můžete později importovat do komponenty React.

import * tak jako Stylizované z './styled'
// použijte styled.components
<stylizovaný. Hlavní>
// kód
</styled.Main>

Díky tomu získáte jasný přehled o tom, které komponenty jsou stylizované a které jsou komponenty React.

Stylizované komponenty jsou kompilovány za běhu

U aplikací, které používají stylizované komponenty, prohlížeč stáhne CSS a analyzuje je pomocí JavaScriptu, než je vloží na stránku. To způsobuje problémy s výkonem, protože uživatel musí při počátečním načtení stáhnout hodně JavaScriptu.

Statické CSS je mnohem rychlejší. Není třeba jej zpracovávat, než jej prohlížeč použije ke stylování stránek. Knihovna stylových komponent se však s každým vydáním zlepšuje. Pokud si můžete dovolit nějaký snížený výkon, pokračujte a použijte jej.

Kdy použít stylizované komponenty

Někteří vývojáři rádi píší CSS v souborech JS, zatímco jiní dávají přednost samostatným souborům CSS. Jak se rozhodnete psát CSS, by mělo v konečném důsledku záviset na projektu samotném a na tom, co se vám nebo vašemu týmu líbí. Stylizované komponenty jsou dobrou volbou pro vytvoření knihovny uživatelského rozhraní, protože vše může být v jednom souboru a lze jej snadno exportovat a znovu použít.

Pokud dáváte přednost psaní čistého CSS, použijte moduly CSS. Můžete mít samostatné soubory CSS a ve výchozím nastavení lokálně upravuje styly. Bez ohledu na to, jakou volbu uděláte, je zásadní znalost CSS.