スタイリッシュなコンポーネントに反応する：他のコンポーネントを参照する

Question

公式の文書（https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components）によれば、私は、例えばホバー効果を引き起こす別のコンポーネントを参照することができます。

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> 
    ) 
    } 
} 

基本的に、私の<Link>上でマウスを移動すると、<Link2>にbackground-colorの変化をトリガする必要があります。

これは起こっていません。なぜどんなアイデア？

私はここにコードスニペットを作成：https://codesandbox.io/s/qv34lox494

Answer 1

をあなたはサイドバイサイドではない、あなたのスタイルのコンポーネントの子であるスタイル・コンポーネントを参照することができます。

ドキュメントからの引用を参照してください：

はここで、私たちのアイコンコンポーネントは、その親リンクへの応答を定義 があなたの問題のために

を推移している、あなたがのためのラッパーを作成することができますあなたのリンクの両方で、このようにCSSにadjacent sibling selectorを使用してください：

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

https://codesandbox.io/s/mo7kny3lmx