emotion in next.js + typescript

jsxImportSource @emotion/react  없이 사용하기

 

1. emotion 설치

$ yarn add @emotion/react @emotion/styled

 

2. tsconfig 설정

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

 

3. .babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

 

 

4. eslint에서 실패할 경우 !

rule을 추가해주자

.eslintrc.json

"rules": {
	...
    
    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
}