如何在样式化组件中扩展多个组件的样式
如何在样式化组件中扩展多个组件的样式
提问于 2018-05-25 15:45:18
我有这些组件：...
const Card = () => <span>There is content</span>
const CardItem = styled(Card)`
background-color: red;
`现在我想要上面的另一个组件，如下所示：
const Card2 = styled(CardItem)`
background-color: green;
`对于我的第三个i项目，我希望扩展所有上述样式以及扩展button html元素。
我就是这么做的..。
Card3 = Card2.withComponent('button').extend`
pointer-events: none;
`但是这个，我得到的卡片2呈现为<span>There is content</span>，但是卡片3只是一个空的‘没有内容
我知道withComponent只替换了标签(Idk)，但是我如何才能做到这一点呢？
回答 1
Stack Overflow用户
发布于 2018-06-02 08:18:13
要让它正常工作，需要做一些事情：
First，Styled Components将您的CSS转换为CSS类，然后通过className属性将这些类附加到React组件。这意味着为了让样式真正得到应用，您必须确保正在处理className属性。目前，Card组件还没有做到这一点。
您希望<Card>接受className属性：
const Card = ({className}) => <span className={className}>There is content</span>这将允许CardItem和Card2按预期显示。
对于第二个，对于Card3，withComponent不会替换标签，它会替换整个组件。由于这个原因，整个Card将被一个按钮替换掉，包括Card中的文本。如果您仍然想要该文本，这里有两个可能的解决方案：
您可以将子代传递到Card3
return <Card3>There is content</Card3>或者，您可以在原始Card中为标记名添加一个属性
const Card = (props) => {
const Tag = props.tag || 'span'
return <Tag className={props.className}>There is content</Tag>
}
const ButtonCard = props => <Card {...props} tag="button" />
const Card3 = Card2.withComponent(ButtonCard).extend`
pointer-events: none;
`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50524030
复制相关文章
相似问题