emotion css 사용해보기

☁️환경☁️

- Yarn

- Next.js (13version)

- TypeScript

 

1. 설치

yarn add @emotion/react @emotion/styled

 

 

2. bael 설정하기

emotion.jsx를 사용하기 위해서는 babel 설정이 필요하다.
- 가장 최상위에서 `.babelrc` 파일 생성하기

- 파일에 아래 코드 작성해 주기

{
  "presets": [
    [
    //기본적으로 next가 가지고 있는 babel 
      "next/babel",
      {
      //대신 emotion.jsx 사용 설정
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ]
}

 

 

3. tsconfig.json에 jsxImportSource 추가해주기

//"compilerOptions"
"jsxImportSource": "@emotion/react"

 

4. 불필요한 파일 삭제(styled)

📦src
 ┗ 📂pages
 ┃ ┣ 📂api
 ┃ ┃ ┗ 📜hello.ts
 ┃ ┣ 📜index.tsx
 ┃ ┣ 📜_app.tsx
 ┃ ┗ 📜_document.tsx