「Vite + React + TypeScript (ESLint + Prettier + Husky) + Vercel 開発環境」で作成した開発環境に Emotion を導入する手順です。

GitHubリポジトリ

Technologies/Features

• Emotion: ^11.11.1

Prerequisites

• Vite + React + TypeScript (ESLint + Prettier + Husky) + Vercel 開発環境

導入手順・環境設定

1. Emotion のインストール

npm i @emotion/react

2. vite.config.ts に追記

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react", // ここを追記
    }),
  ],
});

3. tsconfig.json に追記

{
  "compilerOptions": {
    ...
    "jsxImportSource": "@emotion/react",
    ...
  },
  ...
}

4. .eslintrc.json に追記

{
  ...
  "rules": {
    ...
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
  ...
}

動作確認

1. App.tsx の一部を書き換える（わかりやすくするために background-color を追加しています）。

...
import { css } from "@emotion/react"; // add import
...

// add style
const styles = {
  cardStyle: css`
    padding: 2em;
  `,
};

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      ...
      <div css={styles.cardStyle}> {/* delete classname and add css prop */}
        ...
      </div>
      ...
    </>
  );
}

export default App;

2. App.css の記述を削除

/* 以下を削除 */
.card {
  padding: 2em;
}

画面内に background-color が反映されていたら導入完了です 🎉

GitHubリポジトリ