在 react 中，可通过模板字符串将 scss 模块类（如 `styles.textcontainer`）与全局 css 类（如 `animate`）拼接，注意全局类名不带点号，直接写类名即可。

在 React 项目中，常需同时使用 CSS Modules（如 .module.scss）和全局样式（如 animate.scss 或 animate.css）。CSS Modules 会自动进行局部作用域哈希处理，确保类名唯一；而全局样式则直接注入到 DOM 中，类名保持原样。因此，在组合使用时，关键在于正确引用方式的区别：

• ✅ 模块化类：通过 styles.xxx 访问，需用 ${styles.xxx} 插入模板字符串；
• ✅ 全局类：直接写类名字符串（如 "animate"），不可加 . 前缀（.animate 是 CSS 选择器语法，不是类名本身）。

✅ 正确写法：

import styles from "./text-image-section.module.scss";
import "../../animate.scss"; // 确保已正确引入（无默认导出，仅执行副作用）

<div className={`${styles.textContainer} animate`}>
  {/* 内容 */}
</div>

⚠️ 常见错误：

React Router Code Review

审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。

下载

// ❌ 错误：".animate" 中的点号会导致实际 class 属性值为 "textContainer__abc123 .animate" —— 浏览器会将其视为两个类，但第二个含点号的类名不存在
className={`${styles.textContainer} .animate`}

// ❌ 错误：未引入 animate.scss，或路径错误导致样式未加载
// import "./animate.scss"; // 路径需准确，且文件中需定义 .animate 规则

? 补充建议：

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

• 若全局样式文件为 SCSS（如 animate.scss），推荐通过 @import 统一纳入主样式入口（如 index.scss），避免零散 import；
• 使用 clsx 或 classnames 库可提升可读性与健壮性，尤其在条件添加类时：

  import clsx from 'clsx';
  // ...
  <div className={clsx(styles.textContainer, 'animate', isHidden && 'hidden')}>

总结：混合使用 CSS Modules 与全局类，本质是「变量插值 + 字符串字面量」的组合，牢记全局类名就是纯字符串，无需 CSS 选择器符号。