Stil-Komponenten: legen Sie Stile, die von Kindern auf die Eltern schweben

Ich habe eine einfache Komponente
Hier sind 2 version des es - mit und ohne Stil-Komponenten:

Ohne Stil-Komponenten

<div id="container">
    <div id="kid"></div>
</div>


#container {
    width: 100px;
    height: 100px;
}

#kid {
    width: 20px;
    height: 20px;
}

#container:hover #kid{
    background: green;
}

Mit Stil-Komponenten

const Container = styled.div`
    width: 100px;
    height: 100px;
`;

const Kid = styled.div`
    width: 20px;
    height: 20px;
`;

<Container>
    <Kid />
</Container

Wie die Umsetzung der gleichen, auf hover-Verhalten, das in dem vorherigen Beispiel?

InformationsquelleAutor kurumkan | 2017-07-11
  1. 25

    Als der Stil-Komponenten v2 können Sie interpolieren anderen Stil-Komponenten zu finden, um Ihre automatisch generierte Klassennamen. In deinem Fall werden Sie wahrscheinlich wollen, um etwas wie das hier tun:

    const Container = styled.div`
  &:hover ${Kid} {
    display: none;
  }
`

    Sehen die Dokumentation für mehr Informationen!

    Dies ist kopieren und einfügen aus meiner Antwort hier.

    • Ich war auf der Suche nach diesem durch die Dokumentation und Projekt-Themen. Sollte es nicht Teil der styledcomponents basic-oder advanced-Bereich anstelle von faq? Vielen Dank für die gute Arbeit.
    InformationsquelleAutor mxstbr
  2. 1

    versuchen:

    const Container = styled.div`
    width: 100px;
    height: 100px;
    &:hover #kid {
        background: green;
    }
`;

const Kid = styled.div`
    width: 20px;
    height: 20px;
`;

<Container>
    <Kid id="kid" />
</Container>
    • Danke! Aber ich entfernte alle ids und Klassen, die während der Verwendung von Stil-Komponenten
    • auch versuchen, &:hover > * { background: green; }
    • Dank keiner Weise. Gehst du durch die fcc?
    • ja, Sie können sehen, meine abgeschlossenen Projekte auf meinem github
    • Dies sieht nicht wie die richtige Lösung. IDs können nicht verwendet werden, mit Komponenten - es kann nur einen einzigartigen DOM. Und Verwendung * richten sich an alle Elemente, also, wenn Sie ändern die Struktur zB. fügen Sie einen weiteren div in der Mitte, wird es aufhören zu arbeiten - also am besten zur Ziel-Kid und zwar - wie die Antwort oben nicht.
    InformationsquelleAutor Tom Berghuis
Schreibe einen Kommentar