How to extend a component in styled-components?

Question

JavaScript

There is a Link component, it is styled without styled-components. Is it possible to extend from Link in another component that will already be on styled-components?

Answer 1

It depends on how and what your Link component is styled with.
Let's say it's unstyled:
StyledComponents uses the className property for styling, since we use the rest operator, our component will implicitly pass any property to the a element , including the className passed by the library. So you can style like this:

const StyledLink = styled(Link)`
  // some styles
`;

In case classNames is already used by the component, it is necessary to do concatenation.
In the case of using inline styles, they are more significant than classes in terms of weight, and it will not be possible to redefine styles without using !important. It's better then to transfer all your components to StyledComponents.