상현에 하루하루
개발자의 하루

styled-bootstrap-grid에서 media 함수내부에서 theme props 타입설정

( 업데이트: )

styled-bootstrap-grid에서 media를 통해서 ${media.sm`css`}이렇게 있을때 내부에서 theme props를 사용할때 typescript에서는 에러가 뜨는데 이것을 해결하는 방법

// import original module declarations
import 'styled-components';
import { StyledBootstrapGrid } from 'styled-bootstrap-grid';

import palette from '@style/colorPalette';
import textStyles from '@style/textStyleCatalog';

declare module 'styled-components' {
  // 우리가 아는 타입 지정을 여기서 다해주고 불러서 쓰기
  // 1. 인터페이스 지정
  export interface DefaultTheme {
    isDark: boolean;
    palette: typeof palette;
    textStyles: typeof textStyles;
    styledBootstrapGrid: StyledBootstrapGrid;
  }
}

declare module 'styled-bootstrap-grid' {
  export interface Theme extends DefaultTheme {
    styledBootstrapGrid: StyledBootstrapGrid;
  }
}Code language: JavaScript (javascript)