javascript - 使用 BEM 的 className 和 css 模块的正确参数列表语法

Question

我正在使用 React 和一个非常简单的带有 webpack 的 CSS 模块设置。还使用 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 ，因为它在添加条件类名时确实很方便。您还可以使用绑定(bind)方法

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