styled-components 에러해결 : DefaultTheme 형식에 속성이 없습니다

 

✔️ 문제상황

공식문서에서 시키는대로 theme.ts를 만들고 그걸 활용하려고 하는데 아래와 같이 DefaultTheme 형식에 colors 속성이 없다고 한다. 아...네... 이것이 모두 typescript를 쓴 제 잘못입니다... 애증의 tsc

 

✔️ 해결하기

root 디렉토리에 styled.d.ts라는 파일을 만들고 theme.ts의 형식을 DefaultTheme이라는 이름으로 지정해준다. typescript에서 지양하는 any를 쓴 건 눈감고 지나가주세요~

// styled.d.ts
import 'styled-components';

// styled-components안에 들어있는 DefaultTheme 형식 지정해주기
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: any;
  }
}

 

theme.ts에서 DefaultTheme을 불러와서 theme의 타입으로 지정해준다

// theme.ts
import {DefaultTheme} from 'styled-components';

export const theme: DefaultTheme = {
  colors: {
    white: '#ffffff',
    lightGray: '#e6e6e6',
    gray: '#707070',
    darkGray: '#4D4D4D',
    'subway-line-1': '#0d3692',
    'subway-line-2': '#33a23d',
  },
};

 

theme을 사용할 때에는 App.tsx에서 ThemeProvider로 감싸주는 것 잊지말기!

// App.tsx
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {ThemeProvider} from 'styled-components';
import {theme} from './theme';
import RootStack from './screens/RootStack';

const App = () => {
  return (
    <NavigationContainer>
      <ThemeProvider theme={theme}>
        <RootStack />
      </ThemeProvider>
    </NavigationContainer>
  );
};

export default App;