使用 BEM 更正类名和 css 模块的参数列表语法

Question

我正在使用React和一个非常简单的CSS模块设置与webpack。也使用 BEM 作为类名。

除非以字符串形式，否则带破折号的类名无效，并且我还没有找到不为每个类条目重复引用 css import 语句的字符串版本。

这两种都不理想，我想避免使用库。

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

这些不起作用

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

Answer 1

您可以使用模板文字：

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

虽然我建议使用 classNames，因为它确实很方便添加条件类名。您还可以使用绑定方法

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