Emotion 11 中启用 @emotion/babel-preset-css-prop 需同时满足三条件：安装该 preset（非 plugin）、Babel 配置中启用且置于 @babel/preset-react 之后、tsconfig.json 中 jsx 设为 "preserve"；否则 TS 无法识别 css prop 类型。
Emotion 11 中启用 @emotion/babel-preset-css-prop 的必要条件
不装这个 preset，css prop 在 TS 里会报错：类型“{ css: ... }”上不存在属性“css”。TS 不认识这个 prop，根本不会做类型推导或自动补全。
必须同时满足三个条件：
- 项目已安装
@emotion/babel-preset-css-prop（不是@emotion/babel-plugin-css-prop） -
babel.config.js或.babelrc中启用了该 preset，且放在其他 preset（如@babel/preset-react）之后 -
tsconfig.json的compilerOptions.jsx设为"preserve"（不能是"react"或"react-jsx"）
漏掉任一条件，TS 就无法识别 css prop 类型，VS Code 里 hover 看不到类型，也无法跳转到 css 函数定义。
为什么 jsxImportSource 不能替代 css prop 配置
有人以为在 tsconfig.json 加 "jsxImportSource": "@emotion/react" 就够了——其实这只是让 jsx 编译时自动引入 jsx 函数，和 css prop 完全是两回事。
立即学习“前端免费学习笔记（深入）”；
css prop 是 Babel 插件在编译阶段把 css 属性重写成 css={...} 调用，并注入样式；而 TS 类型支持依赖的是 Babel preset 注入的类型声明 + JSX 元素接口扩展。
常见错误现象：
- 加了
jsxImportSource但没配 preset → TS 报Property 'css' does not exist on type 'IntrinsicAttributes' - 配了 preset 但
jsx模式不是"preserve"→ Babel 不处理cssprop，直接透传给 React，运行时报错或样式不生效
css prop 的类型提示失效？检查 types/@emotion/react 是否被覆盖
Emotion 11 的类型定义默认通过 @emotion/react 自带的 types/ 提供，但如果你项目里有 @types/emotion__react（旧版 DefinitelyTyped 包），它会优先被 TS 加载，而该包早已过时、不兼容 Emotion 11 的 css prop 类型扩展。
解决方法很简单：
- 运行
npm ls @types/emotion__react或yarn list @types/emotion__react - 如果存在，立刻执行
npm uninstall @types/emotion__react - 确保
node_modules/@emotion/react/types/index.d.ts被 TS 正确读取（可通过 VS Code 按住 Ctrl 点击css查看定义路径验证）
否则即使配置全对，TS 也会显示 css 类型为 any，补全失效，媒体查询、主题函数（theme => ...）都得不到类型保护。
使用 css prop 时如何避免性能陷阱
css prop 写法看着简洁，但容易写出高频重计算的内联样式。比如在组件内部直接写 css={{ color: props.theme.primary }}，每次渲染都会新建对象，触发 Emotion 重新 hash 和比对。
推荐做法：
- 静态样式直接用字符串模板：
css="color: blue; font-size: 14px;"（无运行时开销） - 需主题或 props 的逻辑，提前用
useTheme()或props计算好值，再传入css；或封装成styled组件 - 避免在
cssprop 中调用未 memoized 的函数，例如css={getStyles(props)}—— 若getStyles每次返回新对象，就失去样式缓存
最隐蔽的问题：VS Code 里类型一切正常，但热更新后样式突然不生效，大概率是 css 值引用变化导致 Emotion 认为样式已变更，却因缓存策略没及时刷新——这时要检查是否误将动态值嵌套在深层对象中（如 css={{ padding: `${props.p * 2}px` }}）。
