Переопределение сторонних компонентов

Question

У меня есть компонент Button в моем приложении, который я хочу сделать тематическим. Для этого я создал ThemeableButton.js, и я хотел переопределить компонент Button с помощью стилизованного (Button).

Я не использую встроенный стиль, поэтому идея состоит в том, что мой компонент Button не определяет никаких стилей и ничего не знает о стилизованных компонентах.

Я думал, что overriding 3rd party components выполнит эту работу, но это не работает для меня. Я создал пример webpackbin here.

Моя проблема в ThemeableButton.js. здесь:

const StyledButton = styled(Button)` 
     background: ${(props) => props.theme.primaryColor }; 
     border: 2px solid ${(props) => props.theme.borderColor }; 
     color: ${(props) => props.theme.textColor }; 
    `; 

Я ожидал, что это сработает, чтобы переопределить компонент Button.js и добавить реквизит стиля. Конечно, если я определяю StyledButton как этот

const StyledButton = styled.button 

это работает, но идея состоит в том, чтобы переопределить свои компоненты. У меня будет гораздо более сложные компоненты, которые я не хочу определять с помощью конструктора стиля.

Любые идеи о том, как сделать эту работу?

Спасибо!

Answer 1

Существует примечание в нижней части раздела вы обратитесь к https://github.com/styled-components/styled-components#third-party-components

Примечания: стилизованные-компоненты генерируют реальную таблицу стилей с классами. Имена классов затем передаются компоненту-ответчику (включая сторонние компоненты) с помощью прошивки className. Для стилей, которые должны применяться, сторонние компоненты должны присоединять переданную команду className к узлу DOM. См. Использование стилизованных компонентов с существующим CSS для получения дополнительной информации!

Вы должны использовать Classname опору в вашем Button.js, чтобы заставить его работать