Emotion

Emotion je výkonná CSS-in-JS knihovna, která umožňuje psát CSS styly v JavaScriptu a nabízí jak API styled komponent, tak přístup přes css prop pro aplikování stylů na React elementy. Styly se generují za běhu a vkládají do dokumentu, s automatickým doplňováním vendor prefixů, odstraňováním nepoužitého kódu a deterministickými názvy tříd, které brání kolizím stylů.

Knihovna nabízí dva hlavní způsoby použití. Styled API vytváří znovupoužitelné stylované komponenty, zatímco css prop umožňuje aplikovat styly přímo na JSX elementy jako objekty nebo tagged template literals. Oba přístupy podporují dynamické stylování podle props, hodnot tématu a stavu aplikace, takže je snadné implementovat responzivní design i interaktivní změny stylů.

Pro vývoj webu řeší Emotion problémy se scopováním a udržovatelností tradičního CSS v komponentových architekturách. Styly žijí vedle komponent, na které se vztahují, takže je snazší pochopit, jak komponenta vypadá, bez prohledávání samostatných souborů se styly. Podpora source map znamená, že DevTools v prohlížeči ukážou původní soubor, kde byl styl definován. Daní je režie za běhu ve srovnání se statickými přístupy jako CSS Modules nebo Tailwind, které styly extrahují při buildu.