Skip to content

Commit

Permalink
Update install.mdx
Browse files Browse the repository at this point in the history
Added instructions for integrating with Vite and TypeScript
  • Loading branch information
keysmusician authored Aug 16, 2023
1 parent f3b268f commit 6b7dda9
Showing 1 changed file with 29 additions and 1 deletion.
30 changes: 29 additions & 1 deletion docs/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: 'Install'
---

There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion/react` package](/packages/react). If you're not using React, you should use [the `@emotion/css` package](#vanilla).
There are lots of ways to use Emotion. If you're using React, the easiest way to get started is to use the [`@emotion/react` package](/packages/react). If you're not using React, you should use [the `@emotion/css` package](#vanilla).

```bash
yarn add @emotion/react
Expand Down Expand Up @@ -45,6 +45,34 @@ render(
)
```

## With Vite
If you're using Vite, add `@emotion/react` as your `jsxImportSource` in the React plugin options in
`vite.config.{js, ts}`:
```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

## With TypeScript
For TypeScript support, set `jsxImportSource` to `@emotion/react` under `compilerOptions` in
`tsconfig.json`:
```ts
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
}
}
```

## With [`styled`](/docs/styled.mdx)

`styled` is a way to create React components that have styles attached to them.
Expand Down

0 comments on commit 6b7dda9

Please sign in to comment.