重写第三方组件
问题描述:
我在我的应用程序中有一个按钮组件,我想使其具有主题化。 为此,我创建了一个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
它的工作原理,但这个想法是重写我的部件。我将有更复杂的组件,我不想使用样式化的构造函数进行定义。
如何使这项工作的任何想法?
谢谢!
答
中有部分的底部你指的https://github.com/styled-components/styled-components#third-party-components
注记:风格组件生成类真正的样式表。类名然后通过className prop传递给反应组件(包括第三方组件)。对于要应用的样式,第三方组件必须将传入的className prop附加到DOM节点。有关更多信息,请参阅使用带有现有CSS的样式化组件。
你需要使用的className道具在你Button.js,使其工作
这是正确的答案! :)(风格 - 组件共同创造者在这里) – mxstbr
新的链接可以从https://www.styled-components.com/docs/basics#styling-any-components –