изменить стиль вложенного компонента на основе родительских реквизитов в styled-компонентов?

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

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