styled-components - 覆盖第三方组件

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 组件并添加样式 Prop 。当然，如果我这样定义 StyledButton

    const StyledButton = styled.button

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

关于如何使这项工作有任何想法吗？

谢谢!

Answer 1

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

Note: styled-components generate a real stylesheet with classes. The class names are then passed to the react component (including third party components) via the className prop. For the styles to be applied, third-party components must attach the passed-in className prop to a DOM node. See Using styled-components with existing CSS for more information!

你需要在你的 Button.js 中使用 className 属性来让它工作