스타일드컴포넌트 as의 value를 props로 전달할 때 오류

타입을 검사하는 타입스크립트에서 만난 오류다.

as속성을 string 타입으로 지정하여 전달하니 오류가 나더라.

 

스타일드컴포넌트의 as는 원하는 styled에 string을 전달하여 원하는 태그로 변경한다.

 

아래 코드는 button태그로 생성된 Styled를 div로 변경해준다.

const Styled = styled.button`
...
`
<Styled as='div'>
</Styled>

 

props로 전달 시에는?

interface As { 
as: string;
}
const Styled = styled.button`
...
`
<Styled as={props.div}>
</Styled>

해당 컴포넌트에 빨간줄이 생기고 설명을 보면 아래와 같다.

이 JSX 태그의 'children' 속성에는 여러 자식이 있어야 하는 'never' 형식이 필요하지만, 단일 자식만 제공되었습니다.

 

아래처럼 as가 가질수있는 타입의 경우를 모두 넣어주어 해결했다.

as: string | ComponentType<any> | undefined;