web-dev-qa-db-ja.com

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

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

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

スタイル付きコンポーネント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からのドロップインアップグレードであるため、更新することをお勧めしますが、それがカードに含まれていない場合、これは素晴らしい回避策です。

92
mxstbr

Mxstbrの答えと同様に、補間を使用して親コンポーネントを参照することもできます。このルートは、親の子コンポーネントを参照するよりもコンポーネントのスタイリングを少しだけカプセル化するため、気に入っています。

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

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

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

13
Omegalen

私にとっての解決策はこれでした...

   const Content = styled.div`

  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
2
Enrikisimo Lopez Ramos