Styled-Components 테마 적용하기

 

npm install styled-components

만약 TS를 사용한다면 추가적으로 Types를 설치해 준다.

// react
npm install @types/styled-components

// react-native
npm install @types/styled-components @types/styled-components-react-native

아래부터는 TS로 설명하겠습니다.
TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다.

// styled.d.ts
import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    main: string;
    disabled: string;
  }
}

//theme.ts
import { DefaultTheme } from 'styled-components/native';

const CustomTheme: DefaultTheme = {
  main: '#226bef',
  disabled: '#bfbfbf',
};

export default CustomTheme;

만약 theme.d.ts파일에서 parse에러가 나온다면 .eslintignore파일을 만들어 예외처리를 해주면 됩니다.

import React from 'react';
import { ThemeProvider } from 'styled-components/native';

import CustomTheme from '@styles/theme';

export default function App(): React.ReactElement {
  ...
  return (
    <ThemeProvider theme={CustomTheme}>
     ...
    </ThemeProvider>
  );
};

ThemeProvider로 전체를 감싸주면 그 이후로는 아래와 같이 미리 선언한 변수를 사용할 수 있다.

export const ButtonText = styled.span`
  font-size: 16px;
  font-weight: 500;
  margin-right: 27px;
  color: ${({theme}) => theme.main};
`;