Как в styled-components экстендить компонент?

Question

[claus_bor]

Есть компонент Link, он стилезуется без styled-components. Можно ли экстендится от Link в другом компоненте, который уже будет на styled-components?

Answer 1

[Антон Спирин]

Смотря как и чем стилизован ваш компонент Link.
Допустим он не стилизован:

class Link = ({ href, children, ...props }) => <a href={href} {...props}>{children}</a>;

StyledComponents использует для стилизации свойство className, так как мы используем rest оператор наш компонент неявно передаст любое свойство элементу a, в том числе и передаваемое библиотекой className. Поэтому стилизовать можно так:

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

В случае если classNames уже используется компонентом, надо делать конкатенацию.
В случае использования inline стилей, по весу они значимей классов и переопределить стили без использования !important не получится. Тут лучше тогда все свои компоненты на StyledComponents перевести.