Изменить стиль наведения под пользовательским компонентом в styled-component

Question

У меня есть структура ниже.

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

<Nav /> - это компонент класса, и мне нужно показать Dropdown при наведении курсора на <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 /> компонент какstyleled-component, он работает

т.е. const Nav = styled.ul''

Но он не работает для компонента класса.

Есть мысли по этому поводу?

Спасибо.

Answer 1

Вы пытаетесь использовать родительский элемент в качестве селектора, что в настоящее время невозможно в CSS (см .: Есть ли родительский селектор CSS? ).Ваш :hover должен быть в вашем Nav компоненте, который в свою очередь нацелен на соответствующий дочерний элемент.

См. Пример CodeSandbox здесь: https://codesandbox.io/s/x9lmkply4.