ホバー上の別のスタイル付きコンポーネントをターゲットにする

Question

スタイリングされたコンポーネントでホバーを処理する最適な方法は何ですか？私は巻き込まれたときにボタンが現れるラッピング要素を持っています。

私はコンポーネント上にいくつかの状態を実装し、ホバー上のプロパティを切り替えることができましたが、スタイル付きのcmponentsでこれを行うより良い方法があるのだろうかと思っていました。次のような

何かが動作しませんが、理想的である：スタイル付きコンポーネントのよう

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

Answer 1

あなたは自分自動的に生成されたクラス名を参照するために、他のスタイルのコンポーネントを補間することができv2の。あなたのケースでは、おそらくこのような何かをしたいと思う：

const Wrapper = styled.div` 
    &:hover ${Button} { 
    display: none; 
    } 
` 

詳細についてはthe documentationを参照してください！

---

あなたがV1を使用していて、あなたがカスタムクラス名を使用して、それを回避することができますこれを行うために必要がある場合：v2はドロップインアップグレードV1からI」があるので

const Wrapper = styled.div` 
    &:hover .my__unique__button__class-asdf123 { 
    display: none; 
    } 
` 

<Wrapper> 
    <Button className="my__unique__button__class-asdf123" /> 
</Wrapper> 

をdは更新をお勧めしますが、それがカードにない場合、これは素晴らしい回避策です。