2017-12-31 163 views
0

Reactとwebpackを使用した非常に単純なCSSモジュールの設定を使用しています。クラス名にもBEMを使用します。BEMを使用したclassNameとcssモジュールの引数リストの正しい構文

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

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

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

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

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

答えて

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

テンプレートリテラルはBEMで動作しません。しかし、classNamesというライブラリは、バニラCSS es6モジュールとの組み合わせとして最善の選択肢と思われます – user2355058

関連する問題