Korrekte Syntax der Argumentliste für Module className und css mit BEM

Question

Ich verwende React und ein sehr einfaches CSS-Modul-Setup mit Webpack. Auch BEM für Klassennamen verwenden.

Klassennamen mit Bindestrichen sind nicht gültig, es sei denn in Zeichenfolgenform, und ich habe noch keine String-Version gefunden, die nicht wiederholt auf die css import-Anweisung für jeden Klasseneintrag verweist.

Beide sind nicht ideal und ich möchte vermeiden, eine Bibliothek zu verwenden.

<div className={classNames({[styles.foo]: true, [styles.bar]: true})}> 
<div className={[styles.foo, styles.bar].join(' ')}> 

Diese nicht

arbeiten

className={styles['one two']} 
className={styles['one', 'two']} 

Answer 1

Sie Template-Literale verwenden:

className={`${styles.foo} ${styles.bar}`} 

obwohl ich die Verwendung von classNames beraten, wie es bedingte Klassennamen wirklich praktisch ist, in hinzufügen . Sie können auch den verbindlichen Ansatz verwenden

var cx = classNames.bind(styles); 
className={cx('foo', 'bar')}