react 19 不强制任何 css 方案，css modules 适合轻量、零运行时开销场景，需用 .module.css 后缀和 import styles from；css-in-js（如 emotion）仅在强依赖 props、主题或 ssr 一致性时必要，但有运行时开销和配置要求。
React 19 本身不强制或偏好任何 CSS 方案，CSS Modules 和 CSS-in-JS（如 @emotion/react 或 styled-components）仍是并存选项——选哪个，取决于你正在解决的具体问题，而不是 React 版本升级本身。
什么时候该用 CSS Modules？
当你需要轻量、零运行时开销、且团队对“样式即模块”已有共识时，CSS Modules 是最直接的解法。
- 文件必须命名为
Button.module.css，导入写成import styles from './Button.module.css'；漏掉.module后缀或用错 import 方式，就退化为全局 CSS，失去隔离性 - 动态类名拼接需预定义：不能写
className={`btn ${active ? 'btn--active' : ''}`，而应提前在 .module.css 里定义.btn--active，再用styles['btn--active']或styles.btnActive - 不支持在 JS 中直接读取伪类（如
:hover）或媒体查询的计算结果，这些仍得写死在 CSS 文件里 - Vite 和 Create React App 2026 年默认开启
css.modules，无需额外配置；但如果你用自定义 Webpack，需确认css-loader的modules: true已启用
什么时候该考虑 CSS-in-JS？
仅当组件样式强依赖 props、主题上下文或服务端渲染一致性要求时，CSS-in-JS 才真正不可替代。
React Router Code Review
下载
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
-
styled.div或css模板字面量会在运行时生成 class 名并注入<style></style>标签——每次组件挂载都触发一次解析，高频列表页慎用 - 服务端渲染必须配对使用
@emotion/server的renderStylesToString或StyleSheetManager，否则 hydration 时 class 名不一致，触发 React 警告 - TypeScript 类型推导依赖库的类型定义（如
@emotion/react/types/css-prop），漏配会导致css={...}报错 - 不要在
render函数里 new 一个样式对象（如const css = css`...`），应提至组件外部或用useMemo缓存
React 19 带来的实际影响很小
React 19 的 use Hook、Actions、Server Components 等新特性，对样式方案无底层干预——CSS Modules 仍靠构建时哈希，CSS-in-JS 仍靠运行时注入，两者都不依赖 React 渲染管线。
- Server Components 中禁止使用客户端专属 API（如
useEffect），但import styles from './Button.module.css'是纯静态导入，完全可用 - 若你在 Client Component 中用
styled.button，它和 React 18 行为一致；只是要注意use client指令必须显式声明 - 没有所谓 “React 19 推荐的新 CSS 方案”，社区主流仍是
CSS Modules+Tailwind混合，或设计系统级项目用Emotion
真正容易被忽略的点是：无论选哪种，都别让样式逻辑渗入业务判断分支。比如把 if (theme === 'dark') { ... } 直接塞进 css 模板里——这会让样式难以测试、无法提取、调试路径变长。优先用 CSS 变量或预定义 class 组合，把条件收敛到 className 层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
