Zielen Sie beim Schweben auf eine andere Komponente im Stil

83

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

Antworten:

158

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 Buttonoben / vorher definiert Wrapper.


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.

mxstbr
quelle
15
Für jeden, der dies liest, ist die Reihenfolge der Komponenten wichtig. Es wird nur funktionieren, wenn Buttonoben / vorher definiertWrapper
Titan
Eine weitere wichtige Dokumentation
bezieht sich
Was wäre, wenn ich auf einige Requisiten zählen wollte, die von Wrapper an Button übergeben wurden, sodass der Schwebeflug je nach Requisiten unterschiedlich aussieht?
Rmartrenado
28

Ä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

Omegalen
quelle
4

Meine Lösung ist

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
Enrikisimo Lopez Ramos
quelle
0

Diese Lösung hat bei mir funktioniert:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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