根据样式组件中的父道具更改嵌套组件的样式？答案

【问题标题】：change nested component's style based on parent props in styled-components?根据样式组件中的父道具更改嵌套组件的样式？
【发布时间】：2019-07-01 17:45:25
【问题描述】：

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

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;
}

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

【问题讨论】：

有一种方法可以使用 refs 来提取子元素中父元素的样式，但我鼓励您设置一些 CSS 并为您的组件提供类。这就是 CSS 存在的原因，您不应该尝试仅使用倾斜样式来设置应用程序的样式。
@Chase，我认为 styled-components 的全部意义在于停止编写 CSS 文件
您想使用 JSS，而不是内联样式。这个想法是停止编写全局 CSS，而是停止编写组件级别。但是，这并不意味着您只能使用内联样式。您可以直接在组件中编写 CSS。

标签： javascript reactjs styled-components

【解决方案1】：

事实证明这很容易，实际上。

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

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

这个功能是documented here

【讨论】：