在 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>

⚠️ 常见错误及修正：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• ❌
  → 多余的 . 会导致类名变为 "textImageSection_textContainer__abc123 .animate"，浏览器无法识别带点的类；
• ❌
  → 单引号是 JS 字符串语法，但会作为字面字符输出，实际渲染为 class="xxx 'animate'"，无效；
• ❌ 忘记全局样式导入：若 animate.scss 未被任何模块 import，其样式不会注入 DOM，类名即使写对也无效果。

? 进阶建议：

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

  import clsx from 'clsx';
  <div classname="{clsx(styles.textContainer," ishidden>
  <li>若全局样式来自第三方（如 animate.css），推荐通过 CDN 引入或在 public/index.<a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a> 中添加 <link>，避免冗余打包；若需本地管理，确保 animate.scss 中无 :global{} 封装以外的嵌套，以免意外作用域限制。</li>
  <p>总之，混合类名的核心原则是：<strong>模块类走对象属性访问，全局类走纯字符串字面量，拼接时去掉 CSS 选择器符号（.、#），仅保留类名标识符。</strong></p>
  </div>