[P2023] styled-component 모드 적용

context api를 써서 다크모드, 노멀모드로 분기해보려고 기존의 스타일 설정을 변경하려고 시도해보았다

styled.d.ts

theme.ts

globalStyle.ts

다음과 같은 에러가 발생하였다

Property 'mode' does not exist on type 'DefaultTheme'.
    58 |     body{
    59 |         overflow:hidden;
  > 60 |         background: ${({ theme }) => theme.mode.body};
       |                                            ^^^^
    61 |         color: ${({ theme }) => theme.mode.text};
    62 |         transition: all 0.3s linear;
    63 |     }

styled.d.ts에 타입을 기입했어도 globalStyle에는 적용되지 않는다
다른 컴포넌트 파일의 스타일드 컴포넌트에서는 따로 타입을 기입할 필요가 없었다

globalStyle.ts

새로운 에러 발견

Uncaught TypeError: Cannot read properties of undefined (reading 'body')
    at styled_components__WEBPACK_IMPORTED_MODULE_2__.createGlobalStyle.theme.theme (bundle.js:613:21)
    at Ne (flatten.js:80:1)
    at Ne (flatten.js:42:1)
    at t.createStyles (GlobalStyle.js:28:1)
    at t.renderStyles (GlobalStyle.js:48:1)
    at h (createGlobalStyle.js:82:1)
    at createGlobalStyle.js:62:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:1)
 

?를 넣으면서 해결되었다

참고한 다른 코드에는 ?를 쓴 부분이 없었기때문에
남은 부분도 구현하고 다시 확인해보기로 한다

mode change를 커스텀훅으로 만들던 도중 globalStyle과 다른 컴포넌트의 style적용이 다르게 된다는 것을 알았다

위 그림 처럼 theme props를 따로 내려주고

타입도 따로 설정해주면

?를 쓰지 않고도 에러가 나지 않고 화면에서 적용이 잘되는 것을 확인할 수 있었다

다음은 버튼을 만들어볼 예정

참고

Styled-component #3 with typescript
[React 에러 일지] Cannot read properties of undefined