根据 styled-components 中的 parent 属性更改嵌套组件的样式？

Question

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

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

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

它们都是有样式的组件。当我将 selected 道具传递给它时，卡片变成绿色。如何根据传递给 <Card> 的道具更改 <Logo> 的样式？

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

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

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

在 styled-components 中复制此行为的最佳方法是什么？我不喜欢将 selected 道具传递给 <Card> 的所有 children 的想法。

Answer 1

事实证明这实际上很简单。

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

    ${Logo} {
        opacity: ${props => props.selected ? 1 : 0};
    }
`

而这个特征是documented here

根据 styled-components 中的 parent 属性更改嵌套组件的样式？

change nested component's style based on parent props in styled-components?

javascript

reactjs

styled-components