Vite기반 React 프로젝트에서 emotion 설정하기

vite 기반 react + ts 프로젝트에서 emotion.js 설정하는 방법

 

🔶 emotion 관련 라이브러리 설치

 

yarn add @emotion/react @emotion/styled 
yarn add --dev @emotion/babel-plugin

 

🔶 vite.config.js 수정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
    tsconfigPaths(),
  ],
});

 

🔶 tsconfig.app.json 수정

"jsxImportSource": "@emotion/react",

해당 코드 추가

 

🔶 완성샷

 

♦️ DetailedHTMLProps 에러 발생하면?

 

tsconfig.app.json 에 아래 코드 추가해주기

{
	"compilerOptions": {
    	// ...
        "types": ["@emotion/react/types/css-prop"]
    }
}