Emotion CSS conflict Types

생성일

Dec 3, 2021 09:30 AM

태그

Emotion

Issue

Env Settings

작성자

해결 완료

문제

타입스크립트에서 props로 css를 인라인으로 넣어주는 도중 다음과 같은 오류가 발생했다.


TS2322: Type '{ children: Element; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

해결방법은 공식문서를 통해 확인했다.

pragma를 JSX통해 클래식 런타임을 계속 사용하는 경우 동일한 네임스페이스가 확인됩니다 @jsx. 그러나 cssjsx pragma 또는 자동 런타임을 사용하지 않는 경우 렌더링된 구성 요소 유형을 기반으로 조건부로 추가되는 prop 지원 을 활용할 수 없습니다. 사람들이 암시적으로 pragma를 사용하는 경우(예: our 를 사용할 때 @emotion/babel-preset-css-prop) css모든 구성 요소에 대해 전역적으로 prop에 대한 지원을 추가하기 위해 한 번 가져올 수 있는 특수 파일이 있습니다 . 다음과 같이 사용하십시오.

따라서 공식 문서의 내용에 따라 Next-env.d.ts에 다음을 추가하였다.


/// <reference types="@emotion/react/types/css-prop" />

결과

정상적으로 css에 대한 타입 정의가 없어도 해당 오류 없이 동작한다 :)

참고자료

https://emotion.sh/docs/typescript

https://github.com/emotion-js/emotion/issues/1249