在 react 项目中，可同时为元素应用来自 css modules 的局部类名和来自全局样式表的普通类名，只需正确拼接字符串——css modules 类通过 `styles.xxx` 访问，全局类直接写类名（不加点号或引号）。
在实际开发中，我们常需结合 CSS Modules 的作用域隔离优势与全局动画库（如 Animate.css）、重置样式或第三方 UI 工具类（如 Tailwind 的基础工具类）的能力。此时关键在于理解两类类名的来源差异：
- ✅ CSS Modules 类（如 ./text-image-section.module.scss）：经 Webpack/Babel 处理后导出为 JavaScript 对象（如 { textContainer: "textImageSection_textContainer__abc123" }），必须通过 styles.textContainer 访问，再用模板字符串拼接；
- ✅ 全局 CSS 类（如 ../../animate.scss 或 .css）：未启用模块化，类名保持原样（如 .animate → 类名字符串为 "animate"），不可加前缀 . 或引号内带点，否则浏览器会将其视为字面量而非有效类名。
✅ 正确写法：
import styles from "./text-image-section.module.scss";
import "../../animate.scss"; // 确保已正确引入（无 default export）
<div className={`${styles.textContainer} animate fadeInUp`}>
{/* 内容 */}
</div>⚠️ 常见错误及修正：
- ❌ <div className={${styles.textContainer} .animate}> → 多余的 . 会导致类名变为 "textImageSection_textContainer__abc123 .animate"，浏览器无法识别带点的类；
- ❌ <div className={${styles.textContainer} 'animate'}> → 单引号是 JS 字符串语法，但会作为字面字符输出，实际渲染为 class="xxx 'animate'"，无效；
- ❌ 忘记全局样式导入：若 animate.scss 未被任何模块 import，其样式不会注入 DOM，类名即使写对也无效果。
? 进阶建议：
立即学习“前端免费学习笔记（深入）”；
- 使用 clsx 库提升可读性与健壮性：
import clsx from 'clsx'; <div className={clsx(styles.textContainer, 'animate', 'fadeInUp', isHidden && 'hidden')}> - 若全局样式来自第三方（如 animate.css），推荐通过 CDN 引入或在 public/index.html 中添加 <link>，避免冗余打包；若需本地管理，确保 animate.scss 中无 :global{} 封装以外的嵌套，以免意外作用域限制。
总之，混合类名的核心原则是：模块类走对象属性访问，全局类走纯字符串字面量，拼接时去掉 CSS 选择器符号（.、#），仅保留类名标识符。
