
Here's how to add Emotion to React + Vite + TypeScript Project.  
This article is a continuation from "[Setup Vite + React + TypeScript (ESLint + Prettier + Husky) Project and Deploy on Vercel](/tips/react-vite-typescript-vercel-boilerplate/)"

[GitHub repository](https://github.com/chocolat5/react-vite-boilerplate/tree/emotion)

## Technologies/Features

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

## Prerequisites

- [Setup Vite + React + TypeScript (ESLint + Prettier + Husky) Project and Deploy on Vercel](/tips/react-vite-typescript-vercel-boilerplate/)

## How to Setup

1. Install Emotion

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

2. Edit `vite.config.ts`

```jsx
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react", // add this
    }),
  ],
});
```

3. Edit `tsconfig.json`

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

4. Edit `.eslintrc.json`

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

## See how it works

1. Edit `App.tsx` (Adding `background-color` to see if it's working）.

```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. Delete card style from `App.css`

```css
/* delete the following code */
.card {
  padding: 2em;
}
```

Finish 🎉
![](react-vite-typescript-emotion.png)


Add Emotion to Vite + React + TypeScript Project

Tags