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

Question

我有以下结构。

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

<Nav /> 是一个 class 组件，当我将鼠标悬停在 <Nav />.

上时，我需要显示下拉菜单

这是<Nav />的代码片段。

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

这是<DropDown />的代码片段。

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''

但它不适用于 class 组件。

对此有什么想法吗？

谢谢。

Answer 1

您正在尝试使用父项作为选择器，这在 CSS 中目前是不可能的（参见：Is there a CSS parent selector?）。您的 :hover 应该在您的 Nav 组件上，该组件又指向相应的子元素。

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

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

Change hover style under custom component in styled-component

reactjs

styled-components