[React] No overload matches this call. Overload 1 of 2 오류

리액트 타입스크립트 오류 No overload matches this call. Overload 1 of 2

 

발생 원인

타입스크립트 + 스타일드 컴포넌트를 사용하는 과정에서 스타일드 컴포넌트에 임의로 만든 props를 전달하면서 오류 발생

 

해결 방법

스타일드 컴포넌트 styled.태그이름 뒤에 타입을 지정해줘야함

넣고 싶은 속성에 대한 타입들을 지정한 interface를 생성해주거나 any로 지정해주면 오류 해결됨

const AllChaBox = styled.div<any>`
    background-color: aliceblue;
    opacity: ${(props:any) => props.show === "all" ? "70%" : "100%"};
   `