Emotion: CSS in JSのフレームワーク

Emotionは、JavaScriptの中でCSSを書くことを可能にするフレームワークです。

ReactなどのJavaScriptライブラリと一緒に使うことで、効率的で美しいスタイルをアプリケーションに適用することができます。

2023/10/31現在、以下のようなサイトで利用されています。

1. インストール

Emotionを使い始めるには、まずパッケージをインストールする必要があります。

npm install @emotion/react @emotion/styled

👉 ポイント: npmを使ってパッケージをインストールすることで、Emotionをプロジェクトに追加できます。

2. スタイルの適用

Emotionを使ってスタイルを適用する基本的な方法は、スタイル付きのコンポーネントを作成することです。

import styled from '@emotion/styled'

const Button = styled.button`
  background-color: hotpink;
  font-size: 16px;
`

👉 ポイント: styled 関数を使ってHTMLタグを指定し、テンプレートリテラル内でCSSを書くことで、スタイル付きのReactコンポーネントを作成できます。

3. プロップを使ってスタイルを変更

Emotionでは、プロップを使って簡単にスタイルを動的に変更することができます。

const Button = styled.button`
  background-color: ${props => props.primary ? 'hotpink' : 'white'};
`

👉 ポイント: プロップを使って条件に応じたスタイルを適用することができます。この例では、primary プロップが true の時に背景色を hotpink に設定しています。

4. グローバルスタイルの適用

Emotionを使って、アプリケーション全体に適用されるグローバルスタイルを設定することも可能です。

import { Global, css } from '@emotion/react'

const globalStyles = css`
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  }
`

function App() {
  return (
    <>
      <Global styles={globalStyles} />
      {/* 他のコンポーネント */}
    </>
  )
}

👉 ポイント: Global コンポーネントを使って、CSSをグローバルに適用することができます。これにより、アプリケーション全体で共通のスタイリングを設定できます。

以上がEmotionの基本的な使い方です。
これらのポイントを押さえることで、美しいスタイルを簡単に適用することができるようになります。

Emotionは柔軟で強力なツールなので、ぜひ試してみてください！