覆盖第三方组件

Question

我的应用程序中有一个按钮组件，我想让它可以借用。为之

我不使用内联样式，所以想法是我的按钮组件没有定义任何样式，并且对样式组件一无所知。

我认为覆盖第三方组件会完成这项工作，但对我不起作用。我在这里创建了一个WebPackbin示例。

我的问题是在主题键盘中。这里：

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

我期望这能起作用，覆盖我的按钮。JS组件并添加样式道具。当然，如果我像这样定义了造型

    const StyledButton = styled.button

它有效，但这个想法是覆盖我的组件。我将拥有更复杂的组件，我不想使用样式的构造函数来定义。

关于如何使此工作的任何想法？

谢谢！

Answer 1

部分中有一个注释，您可以参考https://github.com/styled-components/styled-components#third-party-components

注意：样式组件会生成带有类的真实样式表。然后，类名通过类名称传递给React组件（包括第三方组件）。对于要应用的样式，第三方组件必须将传递的类名称Prop附加到DOM节点。有关更多信息，请参见使用现有CSS的样式组件！

您需要在按钮中使用className prop使其正常工作