Soru Vurgulu başka bir biçimlendirilmiş bileşeni hedefle


Stillenmiş bileşenlerde hovers'ları işlemenin en iyi yolu nedir? Gezindiğinde bir düğmeyi gösteren bir kaydırma elemanım var.

Bileşen üzerinde bazı durumları uygulayabilir ve vurgulu bir özelliği değiştirebilirdim, ancak stil-cmponents ile bunu yapmanın daha iyi bir yolu olup olmadığını merak ediyordum.

Aşağıdaki gibi bir şey işe yaramıyor ama ideal olacaktır:

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

32
2017-12-06 23:51


Menşei


Bu alakalı görünüyor: github.com/styled-components/styled-components/issues/142 - nickspiel


Cevaplar:


Tarz-bileşenleri v2'den itibaren, otomatik olarak oluşturulmuş sınıf adlarına başvurmak için diğer stillenmiş bileşenleri arayabilirsin. Senin durumunda muhtemelen böyle bir şey yapmak isteyeceksin:

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

Görmek Dökümantasyon daha fazla bilgi için!


V1 kullanıyorsanız ve bunu yapmanız gerekiyorsa, özel bir sınıf adı kullanarak bu konuda çalışabilirsiniz:

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

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

V2, v1'den bir drop-in yükseltmesi olduğundan güncellemeyi öneririm, ancak bu kartlarda değilse, bu iyi bir çözümdür.


51
2017-12-07 06:19



Bunu okuyan herkes için, bileşenlerin sırası önemlidir. Sadece çalışır Button yukarıda / yukarıda tanımlanmıştır Wrapper - Titan
Aslında başka bir önemli doküman Diğer bileşenlere başvurmak - L_K


Mxstbr'ın cevabına benzer şekilde, bir ana bileşene başvurmak için enterpolasyonu da kullanabilirsiniz. Bu rotayı beğendim çünkü bir bileşenin stilini, alt öğedeki alt bileşene başvurmaktan biraz daha iyi bir şekilde kapsandılar.

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

Bu özellik kullanıma girdiğinde size anlatamadım ama bu v3'ten itibaren çalışıyor.

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


2
2017-08-09 19:48