Question

假设我有一个包装器组件，其中包含一些其他组件：

const Card = styled.div`
    background-color: ${props => props.selected ? 'green' : 'none'}
`

<Card>
    <Header>
        <Logo/>
    </Header>
    <Footer/>
</Card>

它们都是样式化的组件。如您所见，当我将selected道具传递给它时，卡片变为绿色。如何根据传递给的道具更改样式？

例如，在纯CSS中，我是这样的：

.card.selected {
    background-color: green;
}

.card.selected .logo {
    opacity: 1;
}

在样式化组件中复制此行为的最佳方法是什么？我不喜欢将selected道具传递给的所有子项的想法。

Answer 1

事实证明，这很简单。

sass

此功能为documented here

Answer 2

<Card style={ { backgroundColor: props.selected ? 'green' : 'none' } }>
    <Header>
        <Logo style={ { opacity: props.selected ? '1' : '0.5' } }/>
    </Header>
    <Footer/>
</Card>

更改基于样式组件中父项的嵌套组件的样式？

2 个答案: