Kieruj na inny komponent ze stylem po najechaniu kursorem

Jaki jest najlepszy sposób obsługi zawisów w stylizowanych komponentach. Mam element zawijający, który po najechaniu kursorem ujawni przycisk.

Mógłbym zaimplementować stan komponentu i przełączyć właściwość po najechaniu kursorem, ale zastanawiałem się, czy istnieje lepszy sposób na zrobienie tego ze styled-cmponents.

Coś takiego nie działa, ale byłoby idealne:

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;
    }
  }
`

Począwszy od styled-components v2, możesz interpolować inne stylizowane komponenty, aby odwołać się do ich automatycznie wygenerowanych nazw klas. W twoim przypadku prawdopodobnie będziesz chciał zrobić coś takiego:

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

Więcej informacji znajdziesz w dokumentacji !

Kolejność komponentów jest ważna. Będzie działać tylko wtedy, gdy Buttonzostało zdefiniowane powyżej / wcześniej Wrapper.

Jeśli używasz wersji 1 i musisz to zrobić, możesz to obejść, używając niestandardowej nazwy klasy:

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

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

Ponieważ v2 jest aktualizacją typu drop-in z v1, polecam aktualizację, ale jeśli nie ma tego na kartach, jest to dobre obejście.

Podobnie jak w przypadku odpowiedzi mxstbr, możesz również użyć interpolacji, aby odwołać się do komponentu macierzystego. Podoba mi się ta trasa, ponieważ hermetyzuje stylowanie komponentu trochę lepiej niż odwoływanie się do komponentu podrzędnego w rodzicu.

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

Nie mogłem powiedzieć, kiedy ta funkcja została wprowadzona, ale działa od wersji 3.

Odpowiedni link: https://www.styled-components.com/docs/advanced#referring-to-other-components

Moje rozwiązanie to

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

To rozwiązanie zadziałało dla mnie:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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

To właśnie zadziałało dla mnie

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