Emotion
2017年にKye Hohenbergerが公開したCSS-in-JSライブラリ。styled-componentsで広まったstyled.div形式と、より柔軟なcssプロパティの両方を備える。
styled-componentsとの最大の違いは、コンポーネントを包まずに使えることだ。BabelやJSXプラグマ経由で<div css={{ color: 'red' }}>と書ける。スタイルのハッシュからクラス名を生成して自動的に重複を排除し、サーバーサイドレンダリングやテーマオブジェクトにも対応する。MUIがv5で採用したため、積極的に選んだ人は少ないまま、Reactの世界で最も多くインストールされるスタイリング系ライブラリの一つになった。弱点はランタイム型CSS-in-JS全般と同じで、スタイルをブラウザ上で計算するぶん時間がかかり、React Server Componentsとも相性が悪い。TailwindやvanillaExtractのようなゼロランタイムの選択肢へ流れているのはそのためである。