
「[Vite + React + TypeScript (ESLint + Prettier + Husky) + Vercel 開発環境](/tips/react-vite-typescript-vercel-boilerplate/)」で作成した開発環境に [Emotion](https://emotion.sh/docs/introduction) を導入する手順です。

[GitHubリポジトリ](https://github.com/chocolat5/react-vite-boilerplate/tree/emotion)

## Technologies/Features

- [Emotion](https://emotion.sh/docs/introduction): ^11.11.1

## Prerequisites

- [Vite + React + TypeScript (ESLint + Prettier + Husky) + Vercel 開発環境](/tips/react-vite-typescript-vercel-boilerplate/)

## 導入手順・環境設定

1. Emotion のインストール

```bash
npm i @emotion/react
```

2. `vite.config.ts` に追記

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

3. `tsconfig.json` に追記

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

4. `.eslintrc.json` に追記

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

## 動作確認

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

```jsx
...
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` の記述を削除

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

画面内に `background-color` が反映されていたら導入完了です 🎉
![](react-vite-typescript-emotion.png)

[GitHubリポジトリ](https://github.com/chocolat5/react-vite-boilerplate/tree/emotion)


Emotion の導入 [Vite + React + TypeScript]

Tags