TypeScript styled-component Props error

B:Link 개발 중 .. 문제가 생겼다..
그동안 JS로 개발하던 내가 TS로 개발하며 생각보다 신경써야 할 부분(타입 선언 등..)이 많았는데 styled-component에서도 props로 하려고 하니 에러가 생겼다.

TypeScript로 개발하니 에러가 좀 이쁘게 뜨는거 같기도 ㅎㅎㅎ
안보는게 젤 좋지만요 ..

왜 이런 문제가 뜨는거지 ?? Props도 선언해줘야 하는건가 ???
네 ....

props로 받는 값의 타입을 지정해줘야 한다!

하나의 props만 지정한다면?

나는 하나의 Props만 필요했기에

styled.div< {프롭스명 : 타입지정} >

이렇게 해주면 된다!

다만, 여기서 궁금했던 점 ExpertListTitleContainer을 사용하는 곳에서 marginTop을 사용하지 않고 싶다면

marginTop = 0px로 해줘야 하는 것인가..?

이렇게요!! 그치만 너무 번거롭다 .. 쓸 때마다 저걸 선언해줘야 한다면 씁 .. 그래서 이것도 찾아보니

이런 방법이 있었다

styled.div< {프롭스명?: 타입지정} > 후 default 값 설정해주기

만약 여러개의 props를 지정해야 할 일이 있다면?

interface를 작성한다

interface 적용할 interfacer 작성 {
프롭스명: 타입지정;
}

이 후에

이렇게 작성해주면 된다.