Was ist der beste Weg, um mit Schwebeflügen in gestalteten Komponenten umzugehen? Ich habe ein Umhüllungselement, das beim Schweben einen Knopf anzeigt.
Ich konnte einen Status für die Komponente implementieren und eine Eigenschaft beim Hover umschalten, fragte mich jedoch, ob es einen besseren Weg gibt, dies mit styled-cmponents zu tun.
So etwas wie das Folgende funktioniert nicht, wäre aber 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;
}
}
`
reactjs
styled-components
Nickspiel
quelle
quelle
Antworten:
Ab Styled-Components v2 können Sie andere Styled-Komponenten interpolieren, um auf ihre automatisch generierten Klassennamen zu verweisen. In Ihrem Fall möchten Sie wahrscheinlich Folgendes tun:
const Wrapper = styled.div` &:hover ${Button} { display: none; } `
Sehen Sie die Dokumentation für weitere Informationen!
Die Reihenfolge der Komponenten ist wichtig. Es funktioniert nur, wenn
Button
oben / vorher definiertWrapper
.Wenn Sie v1 verwenden und dies tun müssen, können Sie dies mithilfe eines benutzerdefinierten Klassennamens umgehen:
const Wrapper = styled.div` &:hover .my__unique__button__class-asdf123 { display: none; } ` <Wrapper> <Button className="my__unique__button__class-asdf123" /> </Wrapper>
Da es sich bei v2 um ein Drop-In-Upgrade von v1 handelt, würde ich ein Update empfehlen. Wenn dies jedoch nicht in den Karten enthalten ist, ist dies eine gute Problemumgehung.
quelle
Button
oben / vorher definiertWrapper
Ähnlich wie bei der Antwort von mxstbr können Sie auch die Interpolation verwenden, um auf eine übergeordnete Komponente zu verweisen. Ich mag diese Route, weil sie das Styling einer Komponente etwas besser kapselt als die untergeordnete Komponente im übergeordneten Element.
const Button = styled.button` ${Wrapper}:hover & { display: none; } `;
Ich konnte Ihnen nicht sagen, wann diese Funktion eingeführt wurde, aber dies funktioniert ab Version 3.
Relevanter Link: https://www.styled-components.com/docs/advanced#referring-to-other-components
quelle
Meine Lösung ist
const Content = styled.div` &:hover + ${ImgPortal} { &:after { opacity: 1; } } `;
quelle
Diese Lösung hat bei mir funktioniert:
const ContentB = styled.span` opacity: 0; &:hover { opacity: 1; } ` const ContentA = styled.span` &:hover ~ ${ContentB} { opacity: 1; } `
quelle