@claus_bor

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

Есть компонент Link, он стилезуется без styled-components. Можно ли экстендится от Link в другом компоненте, который уже будет на styled-components?
  • Вопрос задан
  • 250 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Смотря как и чем стилизован ваш компонент 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 перевести.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы