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

Question 1

スタイル付きコンポーネントでホバーを処理するための最良の方法は何ですか。カーソルを合わせるとボタンが表示されるラッピング要素があります。

コンポーネントにいくつかの状態を実装し、ホバー時にプロパティを切り替えることはできましたが、styled-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;
    }
  }
`

Question 2

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からのドロップインアップグレードなので、更新することをお勧めしますが、それがカードにない場合は、これは問題のない回避策です。

Question 3

mxstbrの回答と同様に、補間を使用して親コンポーネントを参照することもできます。親の子コンポーネントを参照するよりもコンポーネントのスタイルを少しよくカプセル化するので、このルートが好きです。

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

この機能がいつ導入されたかはわかりませんが、v3以降で機能します。

関連リンク：https：//www.styled-components.com/docs/advanced#referring-to-other-components

Question 4

私の解決策は

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

Question 5

この解決策は私のために働いた：

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`