2016-12-06 15 views
21

Stilize bileşenlerde gezinicilerin üstesinden gelmenin en iyi yolu nedir? Gezindiğinde bir düğmeyi gösteren bir kaydırma elemanım var.Diğer stil uygulanmış bileşenleri hover üzerine getirin

Ben bileşeni üzerinde bazı devlet uygulamak ve fareyle üzerine özelliğini geçiş fakat tarz-cmponents ile bunu yapmak için daha iyi bir yolu olup olmadığını merak olabilir.

tarz-bileşenler itibariyle
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; 
    } 
    } 
` 
+0

Bu konuyla ilgili: https://github.com/styled-components/styled-components/issues/142 – nickspiel

cevap

38

onların otomatik olarak oluşturulan sınıf adlarına başvurmak için stil uygulanmış diğer bileşenleri interpole edebilir v2: çalışmıyor Aşağıdaki ama ideal olacaktır gibi

şey. Sizin durumunuzda muhtemelen böyle bir şey yapmak istersiniz:

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

fazla bilgi için the documentation bakın! Eğer v1 kullanıyor ve bunu gerekirse


Özel bir sınıf adı kullanarak etrafında çalışabilirsiniz: bir drop-in yükseltme Ben v1 den v2 yana

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

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

olduğunu d güncellemeyi öneririz, ancak kartlarda değilse, bu iyi bir çözümdür.

+3

Bunu okuyan herkes için, bileşenlerin sırası önemlidir. Sadece '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ' – Titan

İlgili konular