如何在 React 中混合使用模块化 CSS 类与全局 CSS 类

在 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）  
   {/* 内容 */} 

⚠️ 常见错误及修正：

• ❌
  → 多余的 . 会导致类名变为 “textImageSection_textContainer__abc123 .animate”，浏览器无法识别带点的类；

• ❌
  → 单引号是 js 字符串语法，但会作为字面字符输出，实际渲染为 class=”xxx ‘animate'”，无效；

• ❌ 忘记全局样式导入：若 animate.scss 未被任何模块 import，其样式不会注入 dom，类名即使写对也无效果。

? 进阶建议：

立即学习“前端免费学习笔记（深入）”；

• 使用 clsx 库提升可读性与健壮性：

  import clsx from 'clsx'; 
  

• 若全局样式来自第三方（如 animate.css），推荐通过 cdn 引入或在 public/index.html 中添加 ，避免冗余打包；若需本地管理，确保 animate.scss 中无 :global{} 封装以外的嵌套，以免意外作用域限制。

总之，混合类名的核心原则是：模块类走对象属性访问，全局类走纯字符串字面量，拼接时去掉 CSS 选择器符号（.、#），仅保留类名标识符。