Reagiere gestylte Komponenten: siehe andere Komponenten

Question

Laut dem offiziellen Dokument (https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components) kann ich auf eine andere Komponente verweisen, um zum Beispiel einen Hover-Effekt auszulösen.

const Link = styled.a` 
    display: flex; 
    align-items: center; 
    padding: 5px 10px; 
    background: papayawhip; 
    color: palevioletred; 
`; 

const Link2 = styled.a` 
    display: flex; 
    align-items: center; 
    padding: 5px 10px; 
    background: steelblue; 
    color: white; 

    ${Link}:hover & { 
     background-color: greenyellow; 
     color: black; 
    } 
`; 

class Hello extends React.Component{ 
    render() { 
    return(
     <div> 
     <Link>Hello World</Link> 
     <Link2>Hello Again</Link2> 
     </div> 
    ) 
    } 
} 

Grundsätzlich auf meinem <Link> Maus schweben soll eine Änderung in background-color in <Link2> auslösen.

Dies ist nicht passiert. Irgendwelche Ideen warum?

vorbereiten ich einen Code-Schnipsel hier: https://codesandbox.io/s/qv34lox494

Answer 1

Sie zu Stil-Komponenten beziehen, die Kinder Ihrer Stil-Komponente sind, nicht Seite an Seite.

ein Zitat aus dem doc Siehe:

Hier unsere Symbolkomponente definiert ihre Antwort auf seine Mutter Link zu sein

Für Ihr Problem schwebte, können Sie einen Wrapper erstellen für Ihre beiden Links und die adjacent sibling selector in CSS wie folgt verwenden:

const Wrapper = styled.div` 
    & ${Link}:hover + ${Link2} { 
     background-color: greenyellow; 
     color: black; 
    } 
`; 

https://codesandbox.io/s/mo7kny3lmx