Question

我有这些组件：...

const Card = () => <span>There is content</span>

const CardItem = styled(Card)`
  background-color: red;
`

现在我想要上面的另一个组件：

const Card2 = styled(CardItem)`
  background-color: green;
`

对于我的第三个项目，我希望扩展所有上述样式以及扩展button html元素。

我就这样做了......

Card3 = Card2.withComponent('button').extend`
  pointer-events: none;
`

但是，我将Card 2呈现为<span>There is content</span>，但是Card 3只是一个空的“没有内容

我理解withComponent只会替换标签（idk），但我该如何实现呢？

Answer 1

要实现这一目标的一些事情：

首先，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;
`

如何扩展多个组件＆＃39;样式组件中的样式

1 个答案: