styled-components에서 Extending styles이 안될 때

The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.

ClassName을 꼭 전달해줘야 한다.

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

https://styled-components.com/docs/basics#styling-any-component