[TS] Styled-Components에 타입스크립트 사용하기

1. Styled-Components에 타입스크립트 사용하기

- 변환 전 자바스크립트 코드

export const Modal = styled.div`
  display: ${(props) => props.display};
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.6);
`

- 변환 후 타입스크립트 코드

export const Modal = styled.div`
  display: ${(props: { display: string }) => props.display};
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.6);
`

- 참고 사이트

https://stackoverflow.com/questions/44090290/typescript-error-passing-prop-to-styled-components