0

Reactの場合、次のようなものにstyled-components代わるものはありますか

.btn:hover:not(.inactive)>.btn-top,
.btn.active:not(.inactive)>.btn-top {
  z-index: 2;
  /* transform here */
}
.btn:hover:not(.inactive)>.btn-bottom,
.btn.active:not(.inactive)>.btn-bottom {
  z-index: 1;
  /* transform here */
}

(ネストされた条件付きセレクターを使用して、同じ DOM ですべてのアニメーションを確実に実行しますが、異なる z-index レベルは適切に実行/完了します)?

(タイトルの長さについて申し訳ありません。styled-components タグを作成する担当者はいません。)

4

1 に答える 1

1

:hover:not(.inactive) > &, .active:not(.inactive) > &(Sass) セレクターとして機能します。

注意して使用してください。複数の親が条件付きクラス ( and here )を持つ場合、次のようなもの.active &に副作用が生じる可能性があります。別の方法は、React の小道具を子孫に渡して、条件付きスタイリングを行うことです。.active.inactivestyled-components

Geleen (メンテナ) による gitter での回答。補完と google-fu のためにここに追加されました。

于 2016-10-17T22:56:00.733 に答える