我有这些组件:...
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),但是我如何才能做到这一点呢?
发布于 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;
`
https://stackoverflow.com/questions/50524030
复制相似问题