[Emotion] CSS 속성 사용시 타입 에러 해결 방법(with Next.js)

[Emotion] CSS 속성 에러 해결 방법(with Next.js)

 

styled component emotion css property type error

 

 

이슈 발생

아래와 같이 @emotion/react 모듈의 css 함수를 사용하면 type 에러가 발생한다.

import styled from '@emotion/styled';
import { css } from '@emotion/react';

// ...

<div
	css={css`
          padding: 32px;
          background-color: hotpink;
          font-size: 24px;
          border-radius: 4px;
        `}
>
        Blog
</div>

emotion css property error ts2322

에러내용 (ts.2322)

Type '{ children: string; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

 

원인

@types/react/index.d.ts의 HTMLAttributes interface에 css 속성이 없는데, 추가하려고 하니 타입 에러가 발생

(해당 코드: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1843-L1909)

 

 

해결 방법

1. tsconfig.json > compileOptions 에 types 추가

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

 

2. styles.d.ts 추가

styled.d.ts 파일을 추가하고, 아래 코드를 추가

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

 

emotion 공식 홈페이지 설명

 

어떤 방법을 선택해야하는가?

필자는 1번 방법을 적용해도 타입에러가 계속 발생해서, emotion 공식 문서에 나와있는 2번 방법을 선택했다. 이유는 아직 왜인지 모르겠다. 시간 날 때 디깅 해봐야겠다.

 

 

반응형