1

我的应用程序中有一个 Button 组件，我想让它成为主题。为此，我创建了一个 ThemeableButton.js，我想使用 styled(Button) 覆盖 Button 组件。

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

我认为覆盖第 3 方组件可以完成这项工作，但它对我不起作用。我在这里创建了一个 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

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

关于如何完成这项工作的任何想法？

谢谢！

4

1 回答 1

5

在您参考https://github.com/styled-components/styled-components#third-party-components的部分底部有一条注释

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

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

于 2016-12-26T22:25:22.793 回答