根据样式组件中的父属性更改嵌套组件的样式？

Question

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

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

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

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

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

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

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

在样式组件中复制此行为的最佳方法是什么？selected我不喜欢将prop 传递给 的所有孩子的想法<Card>。

Answer 1

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

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

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

这个功能记录在这里