Emotion Variants

Emotion のための型安全な variant API

css() を繰り返し呼ぶことなく、複数の variant を持つコンポーネントスタイルをすっきり定義できます。

npm install emotion-variants @emotion/react @emotion/css

variant

size

color

完全な型推論

variant のキーと値、そして組み合わせまで TypeScript が自動で推論します。キャストや any は不要です。

複数の variant が同時に一致したときだけ適用されるスタイルを定義できます。たとえば large と primary の組み合わせです。

適切なデフォルト値を決めておけば、props を省略してもスタイルが適用されます。

base スタイルは定義時に一度だけシリアライズされます。呼び出し時は一致するスタイルを選んで css prop に渡すだけです。

@emotion/react の css prop とそのまま連携します。バンドラーの設定も Provider も不要です。

生成されたクラス名をコードから直接読み取れます。テストや React 以外の環境で役立ちます。

スクロールして、素の Emotion のボタンが 1 つの ev() 設定に変わっていく様子を見てみましょう。

Before
スタイルが 3 か所に散らばる
素の Emotion では、lookup table、手書きの props 型、コンポーネント内の条件付き spread がすべて同じボタンを表しています。size を 1 つ追加するだけで、そのすべてを修正する必要があります。
After
1 つの設定にすべてをまとめる
共通スタイルは base に、lookup table は variants に、条件付き spread は compoundVariants に、引数のデフォルト値は defaultVariants になります。新しい size は 1 か所に 1 項目追加するだけです。
After
型は自動で、コンポーネントは1行で
VariantProps が設定から props の型を作ってくれます。variant を追加しても型を直す必要はありません。コンポーネントは受け取った props をスタイル関数に渡すだけです。

Button.tsxBefore

コンセプトを選んで、設定がどう変わるか確認してみましょう。

スタイルの選択肢を一か所にまとめます。ドキュメントを読む →

パッケージをインストールして、コンポーネント 1 つのスタイルを ev() に移してみましょう。