我正在使用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']}
答案 0 :(得分:1)
您可以使用模板文字:
className={`${styles.foo} ${styles.bar}`}
虽然我建议使用classNames,因为添加条件类名称确实很方便。您也可以使用绑定方法
var cx = classNames.bind(styles);
className={cx('foo', 'bar')}