样式化组件 - 悬停不使用模板字符串答案

【问题标题】：Styled Components - hover not working with template strings样式化组件 - 悬停不使用模板字符串
【发布时间】：2021-02-22 05:12:28
【问题描述】：

我有一个样式化的组件，我想更改其父级悬停时的背景颜色。现在悬停效果什么都不做，我不知道为什么。

const Parent = styled('div')`
    position: relative;
    margin-bottom: 0;
`

const Overlay = styled('div')`
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    margin: 0;
    left: 0;
    right: 0;
    top: 65%;;
    background-color: rgba(128, 34, 69, 0.9);
    ${Parent}:hover & {
        display: flex;
        cursor: pointer;
        background-color: pink;
    }
`

return(
    <div>
        <Parent>
        <Overlay />
        </Parent>
    </div>
)

【问题讨论】：

你需要在Parent中定义悬停样式
Can you select the parent via CSS?
谢谢@WilliamWang，但我不确定你的意思？我在这里关注样式化组件布局styled-components.com/docs/…
@JosephD。我可以，但我试图在样式化的组件中完成这一切。他们的网站上有一个指南，所以我想我一定是在某个地方犯了错误
@Luke，酷！如果将width 和height 指定给Parent 和Overlay，会发生什么？

标签： javascript reactjs next.js styled-components

【解决方案1】：

const Parent = styled('div')`
    position: relative;
    margin-bottom: 0;
    &:hover > div {
        display: flex;
        cursor: pointer;
        background-color: pink;
    }
`

【讨论】：

谢谢威廉 - 这只影响父母。我遇到的问题是当父母悬停时改变孩子的背景。
什么是孩子？ AFAIK，您将在上悬停时更改背景