Как нацелить родительский компонент от дочернего

Question

У меня есть два компонента. A Child и Parent. Я хочу отобразить ребенка, когда родитель находится над

По сути, я пытаюсь сделать это:

const Child = styled.div`
  display: none;

  ${Parent}:hover & {
    display: block;
  }
`

const Parent = styled(({ className, ...props }) => {
  // Some logic

  return (
    <div className={className}>
      <ItemName />
    </div>
  );
})`
 display: flex;
 ...
`;

Однако я не могу обратиться к родителю, так как parent объявлен после потомка

Я мог бы создать стилизованный div, чтобы обернуть этот потомок в parent и нацелиться на него. то есть:

<Parent>
  <WrapperToTarget>
    <Child />
  </WrapperToTarget>
</Parent>

, но выглядит как плохой обходной путь.

На данный момент я вручную добавил класс к родителю и нацелил его на

const Child = styled.div`
  display: none;

  parent:hover & {
    display: block;
  }
`

const Parent = styled(({ className, ...props }) => {
  return (
    <div className={classNames(className, 'parent')}>
      <ItemName />
    </div>
  );
})``

но не уверен, есть ли «чистый стиль компонента» способ сделать это

Какой хороший подход к этому?

Answer 1

Хотелось бы что-нибудь подобное для вашего варианта использования?

const HoverDisplayChildrenDiv = styled.div`
  & > * {
    display: none;
  }

  :hover {
    cursor: pointer;
    & > * {
      display: block;
    }
  }
`;

Использование:

const Child = props => <div>Child</div>;

const Parent = styled(HoverDisplayChildrenDiv)`
  background-color: lightgray;
`;