Question

我的应用中有一个Button组件，我想使其成为主题。为此，我创建了一个ThemeableButton.js，我想使用样式（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 prop将类名传递给react组件（包括第三方组件）。对于要应用的样式，第三方组件必须将传入的className prop附加到DOM节点。有关详细信息，请参阅将样式化组件与现有CSS一起使用！

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

覆盖第三方组件

1 个答案: