123

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

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

6 に答える 6

221

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

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

詳細については、ドキュメントを参照してください。

コンポーネントの順序は重要です。Buttonが above/before で定義されている場合にのみ機能し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 からのドロップイン アップグレードであるため、更新することをお勧めしますが、それがカードに含まれていない場合、これは優れた回避策です。

于 2016-12-07T06:19:28.170 に答える
3 
const ConnectButton = styled(WalletDialogButton)`
  background-color: #105b72;
  border: none;
  margin: 10vh auto;
  width: 250px;

  &:hover {
    background-color: #105b72c2;
  }
  `;

マルコスが言ったように、これは私にとってはうまくいきました。styled.something の代わりに styled() を使用しています

理由はよくわかりませんが、WalletDialogButton存在する node_modules パッケージを参照しています。

于 2021-11-13T11:32:10.893 に答える