BEMを使用したclassNameとcssモジュールの引数リストの正しい構文

Question

Reactとwebpackを使用した非常に単純なCSSモジュールの設定を使用しています。クラス名にもBEMを使用します。

ダッシュ付きのクラス名は、文字列形式でないと有効ではなく、各クラスエントリのcss import文を繰り返し参照しない文字列バージョンが見つかりません。

これらはいずれも理想的ではないため、ライブラリの使用は避けてください。私はclassNamesの使用をアドバイスが、それは本当に、条件クラス名を追加するために便利になるよう、

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

：これらはあなたがテンプレートリテラルを使用することができ

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

Answer 1

動作しません

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

。また、バインドされたアプローチを使用することもできます。

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