手順

以下の通りに進めればOK（bun での読み替えは必要）

• 【React】CSS-in-JSのライブラリEmotionを試してみる
• (自称) 日本一わかりやすいemotionのドキュメント
• Reactのスタイリングガイド: CSS-in-JS編

1. インストール
2. tsconfig.json への設定追加
3. JSX/TSX ファイルへのインポート

---

1. インストール

React の場合は @emotion/react も必要

$ bun add @emotion/css @emotion/react
bun add v1.1.25 (fe62a614)

installed @emotion/[email protected]
installed @emotion/[email protected]

54 packages installed [5.42s]
$ 

2. tsconfig.json への設定追加

※設定当時は tsconfig.app.json へ記載されていたため、こちらへ追記した

{
  "compilerOptions": {
    // : 
    "jsx": "react-jsx",
+   "types": ["@emotion/react/types/css-prop"],
  },
  "include": ["src"]
}

3. JSX/TSX ファイルへのインポート

• ストリングスタイル
• オブジェクトスタイル

のいずれかで実装する場合は、下記の通りインポートすればOK（「JSX pragma」の記述が必須）

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";