0

I am using React and a very simple CSS modules setup with webpack. Also using BEM for class names.

Classnames with dashes are not valid unless in string form, and I have not yet found a string version that does not repeatedly reference the css import statement for each class entry.

Both of these are not ideal and I would like to avoid using a library.

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

These do not work

className={styles['one two']}
className={styles['one', 'two']}
user2355058
  • 211
  • 3
  • 15

1 Answers1

1

You could use template literals:

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

although I advice the use of classNames, as it really comes in handy to add conditional class names. You can also use the binded approach

var cx = classNames.bind(styles);
className={cx('foo', 'bar')}
Giacomo Cosimato
  • 635
  • 5
  • 9
  • template literals do not work with BEM. However the library classNames does appear to be the best choice as a pairing with vanilla CSS es6-modules – user2355058 Jan 01 '18 at 00:50