[TS] No overload matches this call.

스타일드 컴포넌트에 제네릭으로 Props도 정해줬는데 빨간줄이 떴다... 왜...?

// bgColor -> No overload matches this call.
const BandAd = ({ text, color }: BandAdProps) => {
  return <Container bgColor={color}>{text}</Container>;
};

...

const Container = styled.div<StyledBandAdProps>`
...
`

 

No overload matches this call.

---

이유

이 자리에 undefined가 들어 올 수 도 있는데 내가 string만 정해줘서 그런 것이었다. 메세지를 자세히 보니 중간에 Type 'undefined' is not assignable to type 'string'. 라고 하고 있었다.

// 에러
export interface StyledBandAdProps {
  bgColor: string;
}

// 수정
export interface StyledBandAdProps {
  bgColor: string | undefined;
}

 

참고