web-dev-qa-db-ja.com

Styled-Components：親ホバー上の子供のスタイルを指定します

私はシンプルなコンポーネントを持っていますこれは2つのバージョンです-スタイル付きコンポーネントの有無にかかわらず：

スタイル付きコンポーネントなし

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


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

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

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

スタイル付きコンポーネントを使用する

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

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

<Container>
    <Kid />
</Container

前の例と同じホバー時の動作を実装する方法は？

cssreactjsstyled-components
10
kurumkan

スタイル付きコンポーネントv2では、他のスタイル付きコンポーネントを補間して、自動生成されたクラス名を参照できます。あなたの場合、おそらく次のようなことをしたいと思うでしょう：

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

詳細については ドキュメント をご覧ください！

これは私の回答からコピーして貼り付けました here 。

25
mxstbr

試してください：

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>
1
Tom Berghuis