emotion에서 Theme 을 제대로 인식하지 못하는 에러 (+ 자동 완성도 불가능)

scpt라는 축약어를 써서 theme을 분명히 올바른 방법으로 사용하려고 하는데, 아래와 같은 문제점이 발생했습니다.

 

 theme 자체를 제대로 정의해두지 않은 것이 원인인가 싶어 파일들을 잘 살펴보았습니다.

 

 

하지만 전 theme 속성들을 잘 설정해두었고, ThemeProvider를 사용해 제대로 넘겨주기도 했습니다. 

그래서 원인은 다른 곳에 있다고 판단하고, 해결 방법을 다방면으로 찾아봤습니다.

 

 

우선 늘 그렇듯이 타입스크립트를 사용 중이기 때문에, 타입스크립트와 엮인 문제인 것 같아 

Emotion theme TypeScript 라는 세가지 키워드를 통해 이곳저곳 검색해봤지만, 대부분 비슷하지만 styled-components에서 적용되는 해결 방법을 소개하고 있었습니다. 그 해결방법을 정리하면 다음과 같습니다.

1. 어디든 아무 이름으로(styled.d.ts 를 자주 사용) .d.ts 파일을 만든다. 
2. 그곳에서 theme을 위한 타입 정의를 해준다. (d.ts 안에서는 선언부만 포함! 구현부는 포함 되지 않음)

import "styled-components"

declare module "styled-components" {
  export interface DefaultTheme extends Theme{
    color : {
      ...내용들
    },
    font: {
      ...내용들
    }
  }
}​

여기서, extends Theme은 아래와 같이 theme.ts 파일 내에서 만들어진 타입이다. 이 타입을 이용해 기존의 DefaultTheme interface를 확장시킨다. 

혹은, extends를 할 필요 없이 그냥 DefaultTheme 안의 내용을 저 .d.ts 내에서 일일히 정의해도 되긴 한다.

 

위의 방법은 "styled-components'를 사용하는 typescript 환경에서 잘 적용합니다.

하지만 저는 "emotion"을 사용하는 typescript 환경입니다.

 

emotion 사용하는 typescript 환경에서 theme 제대로 적용시키기 (+ 자동 완성)

위의 방법에서 emotion에 맞게 포팅만 하면 끝납니다. 

우선, 맨 처음에 에러 문구를 보면 "Theme 형식에 ~~ 속성이 없습니다" 이므로, Theme 을 정의해야할 것 같네요.

또한, <ThemeProvider>를 제공해주는 곳은 styled-components가 아니라 @emotion/react 입니다. 이에 맞게 변경도 되어야 할 것 같아요. 최종적으로 해결한 방법은 다음과 같습니다.

 

 

1. 일단 colors, fonts의 타입을 만들고 export 합니다. 

2. 아래와 같이 .d.ts 파일을 작성합니다 (저는 emotion.d.ts 라는 이름으로 작성했습니다.)

import "@emotion/react";
import { ColorType, FontType } from "./theme";

declare module "@emotion/react" {
  export interface Theme {
    colors: ColorType,
    fonts: FontType
  }
}

 

이렇게 하니까 모든 문제가 해결되었습니다! 자동 완성도 잘 되네요 굿 👍👍

 

 

https://forestlee0513.github.io/blog/styled-components%EC%9D%98-theme%EC%97%90-%ED%83%80%EC%9E%85-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0/

https://medium.com/@songforthemute/typescript-styled-components%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%A0-%EB%95%8C-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98%EB%A5%BC-%EC%9D%B8%EC%8B%9D%ED%95%98%EC%A7%80-%EB%AA%BB%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0-37af2310a823

https://lasbe.tistory.com/168

https://1-blue.github.io/posts/styled-components/