使用BEM更正className和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')}