‘React Typescript Styled-Components’에서 ‘property ‘body’ does not exist type ‘DefaultTheme’ 오류 수정하기

React Typescript에서 ‘property ‘body’ does not exist type ‘DefaultTheme” 오류 피하기

React와 Typescript가 처음이고 프로젝트에 다크 모드를 추가하려고 할 때, ‘property ‘body’ does not exist type ‘DefaultTheme” 오류 메시지가 전역 스타일 구성요소인 ‘globalStyle’에서 발생할 수 있습니다. 이 오류는 일반적으로 구성요소에서 테마 속성이 인식되지 않을 때 발생합니다. 이 블로그 포스트에서는 이 오류를 해결하고 React Typescript 프로젝트에 성공적으로 다크 모드를 구현하는 방법을 탐색해 보겠습니다.

오류 이해하기

‘property ‘body’ does not exist type ‘DefaultTheme” 오류 메시지는 ‘DefaultTheme’ 유형에서 ‘body’ 속성이 인식되지 않음을 나타냅니다. 이 오류는 ‘globalStyle’ 구성요소의 테마 구성 및 사용에 문제가 있는 것을 가리킵니다. 이 문제에 대한 가능한 해결책을 살펴보겠습니다.

테마 인터페이스 정의하기

오류를 해결하기 위해 ‘DefaultTheme’ 인터페이스에서 ‘body’ 속성을 정의해야 합니다. 다음은 예시입니다:

import { DefaultTheme } from 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    body: string;
    text: string;
  }
}

위의 코드 스니펫에서는 ‘styled-components’에서 ‘DefaultTheme’ 인터페이스를 가져와 인터페이스를 확장하는 모듈을 선언합니다. ‘DefaultTheme’ 인터페이스에 ‘body’ 및 ‘text’ 속성을 추가합니다.

GlobalStyles에서 테마 적용하기

테마 인터페이스를 정의한 후에는 이제 GlobalStyles 구성요소에서 ‘DefaultTheme’을 사용할 수 있습니다. 다음은 예시입니다:

import { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }
`;

위의 코드 스니펫에서는 템플릿 문자열 구문을 사용하여 테마 객체에서 ‘body’ 및 ‘text’ 속성에 접근합니다. 이렇게 하면 올바른 테마 색상으로 전역 스타일이 적용됩니다.

ThemeProvider 사용하기

마지막으로 ThemeProvider를 사용하여 테마를 적용해야 합니다. 다음은 예시입니다:

<ThemeProvider theme={this.state.theme === 'light' ? lightTheme : darkTheme}>
  {/* 나머지 컴포넌트들 */}
</ThemeProvider>

위의 코드 스니펫에서는 ‘this.state.theme’ 값에 따라 ‘lightTheme’ 또는 ‘darkTheme’을 조건부로 적용합니다. 이렇게 하면 올바른 테마가 응용 프로그램 전체에서 사용됩니다.

결론

테마 인터페이스를 정의하고, GlobalStyles에 테마를 적용하고, ThemeProvider를 올바르게 활용함으로써 React Typescript 프로젝트에서 ‘property ‘body’ does not exist type ‘DefaultTheme” 오류를 피할 수 있습니다. 다크 모드를 구현하는 것은 원활하게 진행되며, 사용자의 선호도에 맞는 시각적으로 매력적인 애플리케이션을 만들 수 있습니다.

본 블로그 포스트가 React Typescript 프로젝트에서 테마 관련 오류를 해결하는 데 필요한 통찰력을 제공했기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs