在 styled-component 中更改自定义组件下的悬停样式

Question

我有一个下面的结构。

<Nav>
  <Title/>
  <DropDown />
</Nav>

<Nav /> 是一个类组件，当我将鼠标悬停在 <Nav /> 上时，我需要显示 Dropdown。

这里是<Nav />的代码sn-p。

export default class HeaderLink extends React.PureComponent {
...
}

这里是<DropDown />的代码sn-p。

const Container = styled.ul`
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .3s ease-in-out;

    ${Nav}:hover & {
        opacity: 1;
        visibility: visible;
        transform: translateY(-2px);
    }
`;

const DropDown = ({ items }) => (
    <Container>
        {items.map(({ title, url }) => (
            <a href={url}>{title}</a>
        ))}
    </Container>
);

DropDown.propTypes = {
    items: PropTypes.array.isRequired
};

export default DropDown;

这不起作用，但我认为如果我将 <Nav /> 组件定义为样式组件，它会起作用

即const Nav = styled.ul''

但它不适用于类组件。

对此有什么想法吗？

谢谢。

Answer 1

您正在尝试将父级用作选择器，这在 CSS 中目前是不可能的（请参阅：Is there a CSS parent selector?）。您的 :hover 应该在您的 Nav 组件上，而该组件又以相应的子元素为目标。

在此处查看示例 CodeSandbox：https://codesandbox.io/s/x9lmkply4。