Fareyle üzerine gelindiğinde stilli başka bir bileşeni hedefleyin

Tarzlı bileşenlerde gezinmeleri tutmanın en iyi yolu nedir? Üzerine gelindiğinde bir düğme gösterecek bir sarma öğem var.

Bileşende bir durum uygulayabilir ve bir özelliği vurgulu olarak değiştirebilirdim, ancak bunu stilize edilmiş cmponentlerle yapmanın daha iyi bir yolu olup olmadığını merak ediyordum.

Aşağıdaki gibi bir şey işe yaramaz, ancak ideal olur:

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

Biçimlendirilmiş bileşenler v2'den itibaren, otomatik olarak oluşturulmuş sınıf adlarına başvurmak için diğer biçimli bileşenlerin enterpolasyonunu yapabilirsiniz. Senin durumunda muhtemelen böyle bir şey yapmak isteyeceksin:

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

Daha fazla bilgi için belgelere bakın !

Bileşenlerin sırası önemlidir. Yalnızca Buttonyukarıda / daha önce tanımlanmışsa çalışacaktır Wrapper.

V1 kullanıyorsanız ve bunu yapmanız gerekiyorsa, özel bir sınıf adı kullanarak bunun üzerinden geçebilirsiniz:

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

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

V2, v1'den açılan bir yükseltme olduğundan, güncellemenizi tavsiye ederim, ancak kartlarda bu yoksa, bu iyi bir çözümdür.

Mxstbr'ın cevabına benzer şekilde, bir üst bileşene başvurmak için enterpolasyon da kullanabilirsiniz. Bu rotayı seviyorum çünkü bir bileşenin stilini üst öğedeki alt bileşene başvurmaktan biraz daha iyi kapsıyor.

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

Bu özelliğin ne zaman tanıtıldığını size söyleyemedim ama bu v3'ten itibaren çalışıyor.

İlgili bağlantı: https://www.styled-components.com/docs/advanced#referring-to-other-components

Benim çözümüm

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

Bu çözüm benim için çalıştı:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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

Bu benim için çalıştı

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