[解決済み] ホバー時に別のスタイル付きコンポーネントをターゲットにする

質問

スタイルドコンポーネントでフーバーを処理する最良の方法は何ですか？私は、ホバーされるとボタンを表示するラッピング要素を持っています。

コンポーネントに状態を実装して、ホバー時にプロパティをトグルすることもできますが、styled-componentsでこれを行うより良い方法があるかどうか疑問に思っています。

以下のようなものは動作しませんが、理想的です。

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

解決方法は？

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

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

参照 ドキュメント をご覧ください。

コンポーネントの順番は重要です。これは、以下の場合にのみ動作します。 Button の上/前に定義されています。 Wrapper .

v1を使用していてこれを行う必要がある場合、カスタムクラス名を使用することで回避することができます。

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

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

v2はv1からのドロップインアップグレードなので、アップデートをお勧めしますが、それができない場合は、この方法でうまく回避してください。