Extending styles with styled-components not working

Question

I\'m trying to extend styles for a react component using styled-components but is not working. AFAIK, I\'m doing it the right way, but perhaps I\'m missing somethin

Answer 1

As stated in documentation:

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

Example

// This could be react-router-dom's Link for example, or any custom component
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>
);

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

Answer 2

I didn't know that was a way to do it. I would do:

    const Link = styled.a`
    ..put you css styles here (className styles)
   `

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

render(){
return(
<div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)
}