TS: styled-components: ThemeProvider로 style 통일하기 (props)

theme.ts

export default {
  colors: {
    black: '#000',
    white: '#fff',
    gray: '#ddd',
  },
};

설정

import 'styled-components';
import theme from './theme';

type Theme = typeof theme;

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

 

=> theme 파일에 color를 저장한 뒤에 위처럼 설정을 해줍니다.

styled-components를 가져와서, theme에서 가져온 타입을 정의합니다.

 

다음으로, styled-components에서 기본으로 제공하는 DefaultTheme 인터페이스를 확장하는 방식으로 Theme 타입을 확장합니다. 

이렇게 하면 DefaultTheme 인터페이스가 theme 객체의 속성을 상속받고, 

styled-components에서 사용할 수 있는 타입이 됩니다.

 

마지막으로 declare module 구문을 사용하여 styled-components 모듈을 확장합니다.

 

    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>

=> 그리고 ThemeProvider 컴포넌트로 감싸고 theme props를 전달합니다.

 

const SearchBarContain = styled.div`
  margin: 0 auto;
  border: 2px solid ${({theme}) => theme.colors.yellow};
  border-radius: 5px;
  overflow: hidden;
`;

=> styled-component에 theme을 인자로 이용하기 위해서는 ${} 를 이용합니다.

DefaultTheme 으로 지정된 theme을 비구조화 할당하여 theme의 프로퍼티로 색상에 접근하면 됩니다.