Styled components 覆盖第三方组件

我有一个按钮组件在我的应用程序中，我想使其可缩放。 为此，我创建了一个ThemeableButton.js，并希望使用styledButton覆盖按钮组件

我不使用内联样式，所以我的想法是我的按钮组件不定义任何样式，也不知道关于样式化组件的任何信息

我原以为我能胜任这项工作，但它不适合我。 我创建了一个webpackbin示例

我的问题在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

这是可行的，但其目的是覆盖我的组件。我不想使用样式化构造函数定义更复杂的组件

有没有办法让这一切顺利进行

---

谢谢

在您参考的部分底部有一个注释

注意：样式化组件生成带有类的真实样式表。然后通过className属性将类名传递给react组件（包括第三方组件）。对于要应用的样式，第三方组件必须将传入的className prop附加到DOM节点。有关更多信息，请参见将样式化组件与现有CSS一起使用

---

您需要在Button.js中使用className prop使其正常工作

在您参考的部分底部有一个注释

注意：样式化组件生成带有类的真实样式表。然后通过className属性将类名传递给react组件（包括第三方组件）。对于要应用的样式，第三方组件必须将传入的className prop附加到DOM节点。有关更多信息，请参见将样式化组件与现有CSS一起使用

---

您需要在Button.js中使用className prop使其工作

这是正确的答案！：styled components共同创建新链接，这是正确答案！：样式化组件共同创建此新链接可在