Styled Components

Styled Components je CSS-in-JS knihovna, která vývojářům umožňuje psát skutečné CSS uvnitř JavaScriptu pomocí tagged template literals. Každá stylovaná komponenta automaticky generuje unikátní název třídy, což eliminuje kolize názvů a zajišťuje, že styly zůstanou omezené na svou komponentu. Základní funkcí je dynamické stylování, kdy se hodnoty CSS mění podle props komponenty.

Knihovna extrahuje pouze CSS potřebné pro vykreslené komponenty a vkládá je do stránky, takže nepoužité styly se do prohlížeče nikdy neposílají. Podpora témat přes ThemeProvider umožňuje konzistentní design tokeny napříč aplikací. Pro React vývojáře Styled Components sladí stylování s komponentovým modelem a drží vizuální logiku pohromadě s chováním. Daní je malá režie za běhu oproti statickým CSS přístupům a méně intuitivní ladění, protože generované názvy tříd nejsou čitelné bez Babel pluginu, který doplňuje názvy komponent.