emotionとstyled-components

Reactコンポーネントにスタイルシートを使って装飾を行う

スタイルシートをJavaScriptの文字列を用いて書く、CSS-in-JSと呼ばれるものの一つ

ほぼ同じライブラリだと認識しているけど、微妙に違いがある。

@emotion/styled

TypeScriptの型定義が本体に含まれている

ある程度ちゃんとメンテされるだろうという点で安心

TSで書かれているのが理想だけど

スタイル内で他のコンポーネントを参照するためには、babelプラグインが必要

少し残念な点

ハイパフォーマンスを謳っている

しかし、自分では計測していないし他の人が計測したデータも見ていない

比較的新しい

余計なpropsがDOMに渡らない

どういう仕組みなんだろう?

styled-components

スタイル内で他のコンポーネントを参照できる

babelプラグイン無しで

比較的古い

ユーザーも多そうだし、安定感を感じる

型定義はDefinitelyTypedにある

よく見ていないけど、比較的追従は早そう

ただ、同梱されている方が望ましいのではと思っている

DTの型定義を中の人がメンテしている場合もあるらしいが...