2017-12-31 9 views
0

Ich verwende React und ein sehr einfaches CSS-Modul-Setup mit Webpack. Auch BEM für Klassennamen verwenden.Korrekte Syntax der Argumentliste für Module className und css mit BEM

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']} 

Antwort

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')} 
+0

Vorlage Literale funktionieren nicht mit BEM. Die library classNames scheint jedoch die beste Wahl zu sein, wenn sie mit Vanilla CSS es6-Modulen kombiniert wird – user2355058