emotion 사용시 react/no-unknown-property 에러

React 에서 emotion 사용시  Unknown property 'css' found 라는 에러가 발생할 때가 있다.

결론은 아래 코드를 .eslintrc.json 에 추가해 두면 된다.

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

아래 링크에서 해당 내용을 확인 할 수 있다. 

 

https://emotion.sh/docs/eslint-plugin-react

Emotion – eslint-plugin-react

 

링크 내용 중 핵심은 아래와 같다.

The react/no-unknown-property rule from eslint-plugin-react will produce an error if the css prop is passed to a DOM element. This violation of the rule can be safely ignored because @emotion/react intercepts the css prop before it is applied to the DOM element.

이 규칙 위반은 @emotion/react가 DOM 요소에 적용되기 전에 CSS 소품을 가로채기 때문에 안전하게 무시할 수 있습니다.

( 구글 번역을 돌려보고 나니 좀 웃기네 ㅠㅠ)

--> 이 규칙 위반은 @emotion/react가 DOM 요소에 적용되기 전에 css 속성을 가져오기에 안심하고 제외시켜도 됩니다. 

정도로 해석하면 될 거 같다.