react 17/18 中 css 失效与版本无关，根本原因是构建工具（webpack/vite）未正确配置样式加载器；css modules 需满足文件名含 .module.css、命名导入、样式对象使用三条件；transition 首次不触发源于初始态未在 css 明确定义；混用全局与模块类时应避免字符串拼接错误，推荐 clsx。
React17/18中import './xxx.css'没效果，先查构建链路是否通
不是 React 版本变了就不认 CSS，而是构建工具（Webpack/Vite）没把样式 loader 配对或启用。React 本身不处理 CSS，import './Button.css' 能否生效，完全取决于打包器有没有 style-loader + css-loader（Webpack）或 vite-plugin-css（Vite）。
常见失效现象：
-
import './base.css'写了，DevTools 元素面板里 class 名存在，但样式没渲染出来 - 控制台报
Module not found: Error: Can't resolve './base.css'—— 路径或大小写错了（Linux/macOS 下Base.css≠base.css） - VS Code 自动删掉 import 行，因为 ESLint/TypeScript 认为它“未使用”（尤其在未渲染的工具模块里）
实操建议：
- 检查
webpack.config.js的module.rules是否包含匹配/\.css$/的 rule，并有style-loader在前、css-loader在后 - Vite 项目确认
vite.config.ts没禁用css插件；CRA 默认已配好，除非eject后手动改坏 - 路径统一用小写+短横线，比如
src/styles/base.css，导入写import './styles/base.css'
CSS Modules 在 React17 和 React18 中静默失效的三要素
React17 和 React18 对 CSS Modules 的支持机制一致，失效不是版本问题，而是文件名、导入方式、使用方式三者任一出错，就会退化成全局 CSS，且不报错——styles.button 返回 undefined，DOM 上 class 就是空的。
必须同时满足：
- 文件名严格含
.module.css（Button.module.css✅，Button.modules.css❌，button.module.css在 macOS/Linux 下和Button.module.css是两个文件） - 导入必须是
import styles from './Button.module.css'（不能是import './Button.module.css'） - 类名必须通过
styles.xxx使用（className={styles.button}✅，className="button"❌）
TypeScript 项目额外补一句声明：
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
否则 styles 类型是 any，IDE 不提示，错误藏得更深。
transition 第一次渲染不触发，React18 严格模式让问题更明显
React18 开启严格模式后，组件会自动多挂载/卸载一次（开发环境），这会让 transition 初次不生效的问题暴露得更早、更稳定。
根本原因：浏览器没拿到起始快照。DOM 插入和样式设置在同一个 microtask，跳过样式计算，导致过渡无起点可插值。
典型表现：
- 元素直接“啪”一下显示，没有淡入、缩放等过渡效果
- DevTools 的 Styles 面板能看到类名加了（如
fade-enter），但 Timeline 里没 transition 动画 - 如果初始
opacity没在 CSS 里明确定义（比如只靠 JS 后续加 class 设置），浏览器采样到的就是opacity: 1
解决办法不是加 el.offsetHeight 强制重排（易 layout thrashing），而是：
- 用 CSS 类明确定义初始态：
.fade-enter { opacity: 0; transform: translateY(20px); } - 确保
classNames前缀与实际类名完全匹配（classNames="fade"→ 就要写.fade-enter、.fade-enter-active） - 若用
react-transition-group，nodeRef必须显式传，且和子元素ref指向同一个useRef实例
全局 CSS 和模块 CSS 混用时 className 拼接最容易写错
混合用 styles.container（模块类）和 animate__fadeIn（全局类）时，字符串拼接稍不注意就白写。
错误写法直接让浏览器收到非法 class 字符串：
-
className={`${styles.container} .animate__fadeIn`}→ 浏览器解析为class="container__abc123 .animate__fadeIn"，带点号的部分无效 -
className={styles.container + ' animate__fadeIn'}→ 若styles.container是undefined，结果是"undefined animate__fadeIn"，极难排查
推荐写法：
- 用
clsx：className={clsx(styles.container, 'animate__fadeIn')} - 或模板字面量加空格：
className={`${styles.container || ''} animate__fadeIn`}
特别注意：import 'animate.css' 或 CDN 加载必须真正执行——只写类名不 import，等于没引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
