TL; DR

theme.ts 만들기

나는 /theme/theme.ts에 광산을 넣었습니다. 다음과 같이 표시됩니다.

export type ThemeType = typeof light; // This is the type definition for my theme object.

export const light = {
  primary: "#f45511",
  text: "#000",
  background: "#fff",
  ...
}
export const dark: ThemeType = {
  primary: ...
  ...
}

const theme = light; // set the light theme as the default.
export default theme;

styled.d.ts 만들기

나는 /theme/styled.d.ts에 광산을 넣었습니다. 다음과 같이 표시됩니다.

import {} from 'styled-components';
import { ThemeType } from './theme'; // Import type from above file
declare module 'styled-components' {
  export interface DefaultTheme extends ThemeType {} // extends the global DefaultTheme with our ThemeType.
}

import { ThemeType } from './theme'; ->
이 행은 위theme.ts 파일에서 고유한 테마 유형 정의를 가져옵니다.

export interface DefaultTheme extends ThemeType {} ->
이 줄은 내 ThemeType의 속성을 포함하도록 전역 DefaultTheme를 확장합니다.

이제props.theme.primary가 자동 완성되고 TypeScript에 컴파일 오류가 없습니다.

긴 버전

styled-components의 일반적인 패턴은 최상위 테마 객체(평범한 이전 객체)를 만들고 ThemeProvider 를 사용하여 모든 구성 요소에 전달되도록 하는 것입니다. 예를 들면 다음과 같습니다.

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

const App = () => (
  {/* theme obj being passed down through ThemeProvider */}
  <ThemeProvider theme={theme}>
    <Button>Click Me</Button>
  </ThemeProvider>
)

// button.tsx
const Button = styled.button`
  color: ${props => (
    props.theme.primary
    /* accessing props.theme */
  )};
  background-color: ${props => props.theme.background};
`;

보시다시피 ThemeProvider는 theme 개체를 모든 자식 구성 요소에 전달합니다. 위의 경우 Button 구성 요소는 이 theme 객체를 사용하여 색상과 배경을 설정합니다.

테마 지원에 대한 자세한 내용은 styled-components docs을 확인하십시오.

이것은 모두 훌륭하지만 Typescript를 사용할 때 primary가 theme 내부의 필드인지 모르기 때문에 오류가 발생합니다. 이와 같이:



Typescript는 기본 테마 개체가 {} 이기 때문에 불평합니다. ThemeProvider는 DefaultTheme 유형의 객체를 모든 소품에 주입하고 DefaultTheme에 대한 정의는 {}입니다. Take a look at the type definition .

이를 해결하려면 선언 병합 및 확장을 사용해야 합니다DefaultTheme. 이 작업을 수행하는 가장 좋은 방법은 다음과 같습니다.

theme.ts 만들기

생성theme.ts . 나는 보통 /theme/theme.ts에서 이것을 만듭니다. 이것은 다음과 같이 보일 수 있는 예입니다.

export type ThemeType = typeof light; // This is the type definition for my theme object.

export const light = {
  primary: "#f45511",
  text: "#000",
  background: "#fff",
  ...
}
export const dark: ThemeType = {
  primary: ...
  ...
}

const theme = light; // set the light theme as the default.
export default theme;

이렇게 하면 테마가 생성되지만 아래의 ThemeType에서 사용할 styled.d.ts도 내보냅니다.

styled.d.ts 만들기

어디에서나 프로젝트의 styled.d.ts 파일을 만듭니다(대부분 번들러가 선택할 것입니다. 그렇지 않은 경우 조사해야 할 사항입니다).

이 코드를 추가하여 DefaultTheme를 확장하고 ThemeType 파일에서 theme.ts와 병합합니다.

import {} from 'styled-components';
import { ThemeType } from './theme'; // Import type from above file
declare module 'styled-components' {
  export interface DefaultTheme extends ThemeType {} // extends the global DefaultTheme with our ThemeType.
}

그게 다야! 당신은 typescript 컴파일러이고 VSCode는 props.theme.primary에 대한 불평을 멈출 것입니다.

이 게시물이 마음에 드셨다면... 부탁드릴 것이 없습니다. 건배.