react+styled-components에서 overload Error가 날 때(with typescript)

import React from 'react';

const Abc = () => {
	return (
    	<Container select />
    )
}

export default Abc;

import styled from 'styled-components';

export Container = styled.div<{select : boolean}>`
	color: ${(props) => props.select ? 'red' : 'blue'};
`

이 호출과 일치하는 오버로드가 없습니다.(no matched overload)

 

typescript를 이렇게 작성했을 때, styled-component는 이상이 없었지만, react return문에서 에러가 떴습니다.

(visual studio code 한글버전이 멋대로 깔려버렸다...)

 

 

styled-component에 interface를 작성하면 해당 오류가 사라집니다.

import styled from 'styled-components';

interface ContainerProps = {
	select: boolean
}

export Container = styled.div<ContainerProps>`
	color: ${(props) => props.select ? 'red' : 'blue'};
`

 

그렇게 세 달만에 styled-component로 props를 사용할 수 있었다고 한다....