Я могу добиться условного стиля, если оберну значок внутри span
или div
следующим образом:
narrationIcon : {
display: 'none'
}
<span className={`${props.narration ? '' : classes.narrationIcon}`}>
<i className="fas fa-volume fa-2x"></i>
</span>
<span style={{ display: props.narration ? '' : 'none' }}>
<i className="fas fa-volume fa-2x"></i>
</span>
Однако при таком использовании устанавливается только начальный стиль:
<i className="fas fa-volume fa-2x" style={{ display: props.narration ? 'inherit' : 'none'}}></i>
<i className={`fas fa-volume fa-2x ${props.narration ? '' : classes.narrationIcon}`}></i>
Почему это? Это связано с тем, что Font Awesome генерирует svg
под капотом?