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

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

---

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

구성 요소에 일부 상태를 구현하고 마우스 오버시 속성을 토글 할 수 있지만 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;
    }
  }
`;

참고 URL : https://stackoverflow.com/questions/41007060/target-another-styled-component-on-hover