使用 BEM 为 className 和 css 模块更正参数列表语法

Question

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

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

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

<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，因为添加条件 class 名称确实很方便。您还可以使用绑定方法

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

Correct argument list syntax for className and css modules using BEM