重写第三方组件

我在我的应用程序中有一个按钮组件，我想使其具有主题化。为此，我创建了一个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

它的工作原理，但这个想法是重写我的部件。我将有更复杂的组件，我不想使用样式化的构造函数进行定义。

如何使这项工作的任何想法？

谢谢！

来源

2016-12-26 Daniel Estevez

中有部分的底部你指的https://github.com/styled-components/styled-components#third-party-components

注记：风格组件生成类真正的样式表。类名然后通过className prop传递给反应组件（包括第三方组件）。对于要应用的样式，第三方组件必须将传入的className prop附加到DOM节点。有关更多信息，请参阅使用带有现有CSS的样式化组件。

你需要使用的className道具在你Button.js，使其工作

来源

2016-12-26 22:25:22

这是正确的答案！ :)（风格 - 组件共同创造者在这里） – mxstbr

新的链接可以从https://www.styled-components.com/docs/basics#styling-any-components –

重写第三方组件

回答

相关问题