使用BEM时className与CSS Modules的正确参数列表语法

看起来你已经摸到CSS Modules的核心点了——每个类名会被编译成独立的唯一标识，所以直接写styles['one two']肯定行不通，因为one和two是两个独立的类，不是一个键。另外styles['one', 'two']是JS逗号运算符的锅，它只会返回最后一个参数，相当于只取了styles['two']，所以才没效果。

既然不想用classNames这类第三方库，这里有几个极简的方案，完全原生就能搞定：

1. 极简版类名合并函数（最推荐） #

自己写个几行的小工具函数，比引入第三方库轻量，还能处理条件类：

// 可以放在全局工具文件里复用
const cx = (...classes) => classes.filter(Boolean).join(' ');

// 使用示例
<div className={cx(styles.foo, styles.bar, isActive && styles.active)}></div>

这个函数会自动过滤掉false/undefined这类假值，避免出现多余的空格，比直接用数组join更灵活。

2. 模板字符串直接拼接 #

如果只是简单的固定类名，用ES6模板字符串也很直观：

<div className={`${styles.foo} ${styles.bar}`}></div>

不过如果有条件类的话，要注意处理空值，比如：

// 避免空字符串导致多余空格
<div className={`${styles.foo} ${isActive ? styles.bar : ''}`.trim()}></div>

3. 解构styles简化写法（适合类名较多的组件） #

如果组件里要用很多类名，不想每次都写styles.xxx，可以解构styles（注意BEM的连字符类名要转成驼峰别名）：

import styles from './YourComponent.module.css';

// 解构时给连字符类名起别名
const { 
  foo, 
  bar,
  'block__element--modifier': blockElementModifier 
} = styles;

// 使用时直接写别名
<div className={`${foo} ${bar} ${blockElementModifier}`}></div>

为什么你的无效写法行不通？ #

再补个小解释帮你彻底搞清楚：

• styles['one two']：CSS Modules会把每个类单独编译，比如one变成Component_one__abc123，two变成Component_two__def456，styles对象里根本没有'one two'这个键，自然返回undefined。
• styles['one', 'two']：JS里逗号运算符会依次执行表达式，最后返回最后一个的值，所以这里等价于styles['two']，只会应用第二个类。

内容的提问来源于stack exchange，提问作者user2355058