Styletronを使用して擬似クラスで擬似要素をスタイルする方法

Question

ボタンに素材のデザインリップルアニメーションを追加しようとすると、私は純粋なCSSの実装hereを使用して使用しました。

今はStyletronに移行しています。これを再現するには

.ripple-class { 
    /* props */ 
} 

.ripple-class:after { 
    /* props */ 
} 

.ripple-class:active:after { 
    /* props */ 
} 

スタイロンでは？私はこの

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
    // :after props 
    }, 
    ':active:after': { 
    // more props 
    } 
}); 

そして

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
    // :after props 
    }, 
    ':active': { 
    ':after': { 
     // more props 
    } 
    } 
}); 

ボタンをアニメーション化しない試みました。私がちょうど実際のCSSをスタイルタグに入れたら、うまく動作します。

Answer 1

最初に試したのはうまくいくはずですが、contentプロパティを二重引用符で囲む必要があります。それ以外の場合は結果のCSSに値が入りません（CSS全体で:after疑似文字は無視されます）。 contentプロパティに間違った値）：

injectStyles(styletron, { 
    // ripple-class props 
    ':after': { 
     content: '""',     // '""' (literally "") is the value not '' (literally nothing) 
     // :after props 
    }, 
    ':active:after': { 
     content: '""', 
     // more props 
    } 
}); 

':after': { content: '' }ので間違っているこの:after { content: }のように見えるCSSになります。

一方、':after': { content: '""' }の場合は、:after { content: ""}のような正しいCSSが表示されます。