动态切换CSS Modules主题类名时，必须通过导入的模块对象取值而非硬编码，因CSS Modules会对类名哈希化；主题类需定义在CSS中并用styles['theme-dark']或驼峰式访问，避免:global污染；推荐按需动态导入独立主题文件或结合CSS变量与data-theme控制。
动态切换CSS Modules主题类名时，className不能硬编码
CSS Modules默认会对类名做哈希化（如 button__primary__abc123），直接写死类名在JS里会失效。必须通过导入的模块对象取值。
- 错误写法：
className="theme-dark button"——theme-dark不是CSS Modules生成的类名，也不会被注入 - 正确做法：把主题类也定义在CSS文件中，并通过
import styles from './Button.module.css'后用styles['theme-dark']或styles.themeDark访问 - 注意命名规范：CSS Modules不支持短横线（
-）作为JS属性名，所以.theme-dark要写成styles['theme-dark']，或改用themeDark驼峰写法
多个主题共存时，别用:global污染全局样式
有人想“偷懒”把主题色变量提成 :global(.theme-dark) { --primary: #000; }，这会导致所有引用该CSS文件的组件都带上该全局规则，主题切换变成全局覆盖，失去模块隔离意义。
- 真正可控的方式：每个主题写一个独立的CSS Modules文件，如
theme-dark.module.css和theme-light.module.css - 运行时按需导入：
import themeStyles from `./${currentTheme}.module.css`（注意：Webpack支持动态require，Vite需用import()异步加载） - 若用CSS变量，变量本身应定义在
:root或顶层容器上，由JS控制document.documentElement.setAttribute('data-theme', 'dark')，再配合[data-theme='dark'] .button { --color: black; }的方式，此时CSS Modules只管结构类名，不负责变量定义
React中用classNames拼接动态主题类名容易漏掉哈希后缀
用 clsx 或 classnames 库组合类名时，如果混入了非CSS Modules来源的字符串（比如从props传进来的 theme 值），很容易漏掉实际生成的哈希类名。
- 安全写法：
className={clsx(styles.button, styles[theme])}，其中theme是字符串，但必须确保它对应CSS文件中已声明的类（如.light、.dark） - 危险写法：
className={clsx(styles.button, `theme-${theme}`)}——theme-dark不是模块导出的key，结果为空字符串，样式丢失 - 调试技巧：打印
console.log(styles)看实际导出的键名，避免凭空猜测
Vite或Webpack下热更新时，CSS Modules主题文件可能不重载
动态 import 主题CSS文件（如 import(`./themes/${theme}.module.css`)）在开发时容易遇到样式没更新的问题，不是代码逻辑错，而是构建工具对动态路径的HMR支持有限。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：修改任意一个被 import 的主题CSS文件，触发全量重载
- 更稳方案：把主题变量抽到JS对象里（如
themes.js），CSS Modules只负责结构，颜色/间距等通过内联style或CSS变量注入 - 关键点：CSS Modules本质是编译时绑定，运行时无法“重新编译”新类名；所谓“动态切换”，其实是提前编译好所有主题，再用JS选中对应类名——这点常被忽略，导致以为能实时生成新样式
