覆盖第三方组件

Question

我的应用中有一个 Button 组件，我想将其设为主题。 为此，我创建了一个 ThemeableButton.js，我想使用 styled(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的部分底部有一个注释

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

您需要在 Button.js 中使用 className 属性才能使其工作