React中CSS Modules类名必须通过styles对象访问，不可直接拼接字符串；classnames可安全合并动态类名，但所有键值须预定义于CSS文件中并经styles映射。
React中CSS Modules的类名输出机制决定了不能直接拼接字符串
CSS Modules在构建时会将button.module.css里的.primary编译成类似Button_primary__abc123的唯一哈希名，这些名字只在JS模块里以对象属性形式存在，比如styles.primary。直接写className="button " + (isActive ? "primary" : "secondary")完全无效——因为"primary"不是真实类名，只是原始文件里的标识符。
必须通过styles对象取值，且所有参与切换的类名都要提前定义在CSS文件中。
用classnames合并静态与动态CSS Modules类名
classnames本身不关心类名来源，它只负责把参数“转成空格分隔的字符串”。关键在于传给它的每个值，都得是styles.xxx这种已解析的真实类名。
- 安装：
npm install classnames - 导入：
import styles from './Button.module.css';和import cx from 'classnames'; - 用法示例（注意
styles.base是必选基础类，styles[variant]是动态键访问）：
function Button({ variant = 'primary', size = 'md', isActive }) {
return (
<button
className={cx(
styles.base,
styles[variant], // ✅ 动态取值，前提是variant值必须匹配CSS中的类名（如'primary'/'danger'）
{ [styles.active]: isActive }, // ✅ 对象写法：条件为真时才加入styles.active
size === 'lg' && styles.large // ✅ 布尔表达式写法
)}
>
Click me
</button>
);
}
⚠️ 容易踩的坑：styles[variant]如果variant值不存在（比如传了'warning'但CSS里没定义.warning），结果是undefined，classnames会忽略它，不会报错但样式丢失——建议加运行时校验或用defaultProps兜底。
立即学习“前端免费学习笔记（深入）”；
为什么不用模板字符串或三元运算符硬拼？
因为CSS Modules的类名不是字符串常量，而是编译后生成的、带哈希的、不可预测的标识符。写${styles.primary}是对的，但写"primary"或`button--${variant}`就彻底脱离了CSS Modules机制，既无法享受局部作用域，又失去构建时的压缩和冲突规避能力。
更隐蔽的问题：某些打包器（如Vite）在开发模式下可能保留原始类名用于调试，但生产环境必然哈希化——硬编码字符串在生产环境必然失效。
所以，所有类名必须经过styles对象“翻译”，classnames只是帮你把多个翻译结果干净地串起来。
搭配useMemo避免重复计算class字符串
当组件高频更新（比如配合动画或实时状态），每次渲染都调用cx()会重新拼接字符串。虽然开销极小，但若涉及大量条件判断，可缓存结果：
const buttonClass = useMemo(() =>
cx(styles.base, styles[variant], { [styles.active]: isActive }),
[variant, isActive]
);
注意依赖数组必须包含所有影响类名的变量，漏掉variant会导致样式不更新；同时不要把styles对象本身放进去——它在模块顶层，不会变，加进去反而破坏缓存。
CSS Modules的类名映射是模块级常量，真正需要响应式更新的，只是你传给cx的那些值。
