[styled-components] 타입스크립트에서 사용하기

테마 정의

//styled.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      '--color-gray': string;
      '--color-gray800': string;
      '--color-gray700': string;
    };
  }
}

//theme.ts

import { DefaultTheme } from 'styled-components';

export const theme: DefaultTheme = {
  colors: {
    '--color-gray': 'rgba(58,58,58,1)',
    '--color-gray800': 'rgba(58,58,58,0.8)',
    '--color-gray700': 'rgba(58,58,58,0.7)',
  },
};

 

테마 사용

import { ThemeProvider } from 'styled-components';

function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        ...
      </ThemeProvider>
    </>
  );
}

const LogoContainer = styled.div`
  color: ${(props) => props.theme.colors['--color-gray700']};
  `

 

글로벌 스타일 정의 & 사용

//global-styles.ts

import { createGlobalStyle } from 'styled-components';
import { normalize } from 'styled-normalize';

export const GlobalStyle = createGlobalStyle`
${normalize}

html {
    display: block;
}

strong{
    font-weight: bold;
}
`;

styled-normalize

reset.css, normalized.css의 역할을 하는 것으로, 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것이다.

function App() {
  return (
    <>
        <GlobalStyle />
        ...
    </>
  );
}

 

Reference

1. npx create-react-app my-app --template typescript
2. https://velog.io/@kmlee95/React-Typescript-eslint-prettier%EC%84%A4%EC%A0%95
3. npm i --save-dev @types/styled-component
4. .eslicrc 수정https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

5. 전반적인 셋팅
https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

6. 스타일 컴포넌트는 함수 안에 정의하면 안된다. https://medium.com/geekculture/you-may-see-this-warning-because-youve-called-styled-inside-another-component-styled-components-7766b4740b22