親CSSの状態に基づいて、条件付きの子のアニメーション（のためのスタイルを作ら-コンポーネントとが反応）

Question

、同じDOMにすべてのアニメーションを確保するために、ネストされた条件付セレクタを使用して

.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 */ 
} 

（のようなものへの選択肢があります、異なるz-インデックスレベルが適切に実行/完了していますか？）

（タイトル長さについては申し訳ありません。スタイル・コンポーネントのタグを作成することはありません担当者。）（サス）のセレクタとして

Answer 1

:hover:not(.inactive) > &, .active:not(.inactive) > &作品。

注意して使用してください。 .active &のようなものは、複数の親が条件付きクラス（ここでは.activeと.inactive）を持つ場合に副作用を起こす可能性があります。代わりの方法は、pass React props to descendants for conditional styling with styled-componentsです。

geleen（maintainer）によってgitterに回答しました。完了とgoogle-fuのためにここに追加されました。