Ziel eine andere gestylte Komponente auf Hover

Question

Was ist der beste Weg, um Hover in gestylten Komponenten zu behandeln. Ich habe ein Umhüllungselement, das beim Überfahren eine Schaltfläche anzeigt.

Ich könnte einige Zustand auf der Komponente implementieren und eine Eigenschaft bei Hover umschalten, aber ich frage mich, ob es eine bessere Möglichkeit gibt, dies mit styled-cmponents zu tun.

So etwas wie die folgende nicht funktioniert aber wäre ideal:

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

Answer 1

Ab styled-Komponenten v2 können Sie andere gestylten Komponenten interpoliert, um ihre automatisch generierte Klassennamen zu verweisen. In Ihrem Fall werden Sie wahrscheinlich so etwas tun:

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

the documentation Siehe für weitere Informationen!

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

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

Da v2 ist ein Drop-in-Upgrade von v1 ich:

---

Wenn Sie v1 verwenden und Sie müssen dies tun Sie um es mithilfe einer benutzerdefinierten Klassennamen arbeiten können Ich empfehle die Aktualisierung, aber wenn das nicht in den Karten ist, ist dies ein guter Workaround.