마우스 오버시 다른 스타일 구성 요소를 타겟팅

스타일 구성 요소에서 호버를 처리하는 가장 좋은 방법은 무엇입니까? 마우스를 가져 가면 버튼이 표시되는 래핑 요소가 있습니다.

구성 요소에 일부 상태를 구현하고 마우스 오버시 속성을 토글 할 수 있지만 styled-cmponents로이를 수행하는 더 좋은 방법이 있는지 궁금합니다.

다음과 같은 것은 작동하지 않지만 이상적입니다.

const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &:not(:last-child) {
    margin-bottom: 2rem;
  }
  &:hover {
    .button {
      display: none;
    }
  }
`

스타일 구성 요소 v2부터는 자동 생성 된 클래스 이름을 참조하기 위해 다른 스타일 구성 요소를 보간 할 수 있습니다. 귀하의 경우 다음과 같이 할 수 있습니다.

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

자세한 내용 은 설명서 를 참조하십시오!

구성 요소의 순서가 중요합니다. Button위 / 전에 정의 된 경우에만 작동합니다 Wrapper.

v1을 사용 중이고이를 수행해야하는 경우 사용자 정의 클래스 이름을 사용하여 문제를 해결할 수 있습니다.

const Wrapper = styled.div`
  &:hover .my__unique__button__class-asdf123 {
    display: none;
  }
`

<Wrapper>
  <Button className="my__unique__button__class-asdf123" />
</Wrapper>

v2는 v1에서 드롭 인 업그레이드이므로 업데이트하는 것이 좋지만 카드에없는 경우 좋은 해결 방법입니다.

mxstbr의 대답과 마찬가지로 보간을 사용하여 부모 구성 요소를 참조 할 수도 있습니다. 나는 부모의 자식 구성 요소를 참조하는 것보다 구성 요소의 스타일을 조금 더 잘 캡슐화하기 때문에이 경로를 좋아합니다.

const Button = styled.button`
  ${Wrapper}:hover & {
    display: none;
  }
`;

이 기능이 언제 도입되었는지는 알 수 없었지만 v3부터 작동합니다.

관련 링크 : https://www.styled-components.com/docs/advanced#referring-to-other-components

내 해결책은

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

이 솔루션은 저에게 효과적이었습니다.

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`

이것은 나를 위해 일한 것입니다

const NoHoverLine = styled.div`
  a {
    &:hover {
      text-decoration: none;
    }
  }
`