pseoduclassをクラス名に基づいて2つのオプションのいずれかに変更してください

Question

ボタンにウィッシュリストクラスがあるかどうかに基づいて 'button-transparent：before'属性を変更します。以下SASSは、あなたが:before擬似要素を適用する場合は、DOM要素がクラス.button--transparentとも.wishlistを持っているときにSASSは次のようになります。

<button 
    className={classnames(
     'button--transparent', 
     {'wishlist icon--heart-filled': props.wishlisted}, 
     {'icon--heart': !props.wishlisted}, 
    )} 
    onClick={props.toggle} 
> 
    ... 
</button> 

SASS

.button--transparent { 
    $color: initial; 
    .wishlist & { 
    $color: #EE4444; 
    } 

    &:before { 
    color: $color !important 
    } 
} 

Answer 1

を動作するようには思えません。

.button--transparent { 
    $color: initial; 
    &.wishlist { 
    $color: #EE4444; 
    &:before { 
    color: $color !important 
    } 
    } 
}