向Emotion的css属性传入含position的style对象时触发TS报错

安全阿岳

2026-9-3

问题原因

这个报错是TypeScript的字面量类型自动加宽（widening）机制，搭配CSS-in-JS库的严格类型校验共同触发的：

当你在组件外部单独定义const style = { position: 'absolute' }时，这个对象没有绑定到任何明确的类型上下文，TypeScript会默认把字符串值'absolute'的类型加宽为通用的string类型。但css属性对应的Interpolation<Theme>类型里，position属性只接受特定的字面量联合类型（'absolute' | 'relative' | 'fixed' | 'static' | 'sticky'等），不接受任意string，因此抛出类型不匹配错误。
其他CSS属性没有触发报错，是因为大部分CSS属性本身就接受任意字符串值（比如color、fontSize等），就算类型被加宽为string也能匹配类型要求。
内联写法能正常运行，是因为内联传入的对象直接处于css属性的类型上下文里，TypeScript会按照Interpolation<Theme>的类型要求做精准推导，不会把'absolute'加宽为string，自然匹配类型。

报错信息里提到的is not assignable to type 'undefined'，是因为Interpolation<Theme>是一个包含多类型成员的联合类型，TS匹配完所有成员都不满足后，最后匹配到undefined分支时抛出的提示，不是说你传入的值是undefined。

解决方案

任选以下一种方式修复即可：

给外部定义的样式对象加as const断言，阻止TS的类型加宽行为，让所有属性值被推导为精确的字面量类型：

// 修复后可正常运行
const style = {
   position: 'absolute'
   // ...其余CSS属性
} as const

const Component = () => {
   return <div css={style}/>
}

显式给样式对象标注CSS-in-JS库提供的CSS对象类型，从根源匹配类型要求：

// 以Emotion为例，其他支持css prop的库可替换为对应导入的类型
import type { CSSObject } from '@emotion/react'

const style: CSSObject = {
   position: 'absolute'
   // ...其余CSS属性
}

const Component = () => {
   return <div css={style}/>
}

用库提供的css工具函数包裹样式定义，这也是官方推荐的写法，除了解决类型问题，还能享受样式缓存、嵌套语法、自动前缀等能力：

import { css } from '@emotion/react'

const style = css({
   position: 'absolute'
   // ...其余CSS属性
})

const Component = () => {
   return <div css={style}/>
}

内容的提问来源于stack exchange，提问作者HigoChumbo