emotion-js/emotion

これは何？

主な機能

• 01文字列構文またはオブジェクト構文でスタイルを記述できます。
• 02css propとstyled-components風のAPIを提供します。
• 03詳細度の問題を避けながら、予測どおりにスタイルを合成できます。
• 04デバッグに役立つソースマップとラベルを利用できます。
• 05本番環境でスタイルを積極的にキャッシュします。
• 06追加の最適化に使える任意導入のBabel pluginを提供します。

ユースケース

• propsに応じたスタイルや動的なスタイルを使ったReactアプリケーションのスタイリング。
• 合成可能なスタイルを備えた再利用可能なコンポーネントライブラリの構築。
• classベースのスタイルシートから、コンポーネントとスタイルをまとめて管理する方式への移行。

クイックスタート

1. 1

   npmでコアパッケージをインストールします

   npm install --save @emotion/react
2. 2

   Emotionからjsxをインポートし、コンポーネントでcss propを使用します

使う前に知っておきたいこと

• !Babelプラグインは任意ですが、一部の機能には必要です。

トピック

よくある質問

emotion とは？

文字列またはオブジェクト形式のスタイルを使え、予測しやすいスタイル合成を実現する、高速で柔軟なCSS-in-JSライブラリ。 Emotionを使うと、文字列構文またはオブジェクト構文でJavaScript内にコンポーネントのスタイルを記述できます。スタイルは実行時に生成されてCSSとして適用されるため、別のスタイルシートを管理せずにpropsやstateで見た目を変更できます。

emotion は無料で使えますか？ライセンスは？

emotion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

emotion は今もメンテナンスされていますか？

半年以内に更新あり。emotion の最終コミットは 2026年8月28日 です。

emotion は何に使えますか？

propsに応じたスタイルや動的なスタイルを使ったReactアプリケーションのスタイリング。 合成可能なスタイルを備えた再利用可能なコンポーネントライブラリの構築。 classベースのスタイルシートから、コンポーネントとスタイルをまとめて管理する方式への移行。

emotion のインストール方法は？

npmでコアパッケージをインストールします: npm install --save @emotion/react Emotionからjsxをインポートし、コンポーネントでcss propを使用します

emotion はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/emotion-js/emotion