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

Program / 글쓴이

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

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

답변