Zielen Sie beim Schweben auf eine andere Komponente im Stil

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

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.

Ä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

Meine Lösung ist

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

Diese Lösung hat bei mir funktioniert:

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

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