Emotion의 inline CSS 타입

생성일

Dec 2, 2021 01:20 PM

태그

Emotion

TypeScript

작성자

해결 완료

문제

인라인 CSS를 주려고 했지만 타입 오류를 내뱉는다.

현재 인라인 CSS 기능은 꽤나 다용도로 쓰여질 확률이 높은 prop이다. 따라서 이를 해결하는 것이 중요하다고 판단하여 문제를 탐색했다.

타입에 대해 직접 부딪히며 해결해본 결과, 다음 type을 줄 때 문제를 해결할 수 있는 것으로 확인되었다.



import { css, Interpolation, Theme } from '@emotion/react';

export interface ImageContainerProps {
  css?: Interpolation<Theme>;
}

추측해보건대... Interpolation이라는 것은 아마 Emotion의 전반적인 CSS 렌더 트리를 구상하는 핵심 인터페이스일 것이다.

그리고 theme는 display, position 등 CSS default property에 관한 정보를 가지고 있는 객체일 것이다.

따라서, 이모션에서는 앞으로 이런 타입들을 잘 활용하면 편할 것 같다는 생각이 들었다.

타입 오류 문제를 말끔히 해결할 수 있었다.