Extending Styled Component with TS

재사용을 염두에 두어 Base Style의 Component를 만들고,
이 Component를 Styled-Component로 확장하여(Custom CSS 추가) 사용하고자 한다면,
아래와 같이 Component에 className을 지정해 주어야 한다.

const Container = styled.div`
  transform: scale(0.8);
`;

interface IProps {
    backTo: string;
    //className must be mentioned!!!!!
    className?: string;
}

//className must be mentioned!!!!!
const BackArrow: React.SFC<IProps> = ({backTo, className}) => (
    <Container className={className}>
        <Link to={backTo}>
			...        
        </Link>
    </Container>
);

//Base Component
export default BackArrow;

아래와 같이 BackArrow component를 원하는 CSS로 확장하기 원하는 경우에는,
Base Component에 className을 표기해 주어야 한다.

//Extending Component using styled-component
const BackArrowExtended = styled(BackArrow)`
  position: absolute;
  top: 20px;
  left: 20px;
`;