在Emotion中如何定义受限TS类型，使css prop仅允许指定CSS属性插值

Emotion 没有直接对外暴露你描述的这类开箱即用的工具类型，但我们可以基于 Emotion 内置的 CSSObject 类型封装递归工具类型来实现需求，同时保留选择器、媒体查询等嵌套结构的类型支持。

自定义工具类型实现 #

import type { CSSObject } from '@emotion/react'

// 泛型参数传入你允许使用的CSS属性名集合
type RestrictedCSS<AllowedProps extends keyof CSSObject> = {
  // (string & {}) 为TS黑魔法，既保留允许属性的类型提示，也支持任意自定义选择器字符串
  [Key in AllowedProps | (string & {})]?: 
    Key extends AllowedProps 
      ? CSSObject[Key] 
      // 选择器对应的嵌套值递归应用当前约束类型
      : RestrictedCSS<AllowedProps>
}

使用示例 #

以仅允许使用color属性为例：

// 声明仅允许color属性的css类型
type OnlyColorCSS = RestrictedCSS<'color'>

// ✅ 合法写法
const validCSS: OnlyColorCSS = {
  color: 'white',
  "&:hover": {
    color: 'black',
  }
}

// ❌ 非法写法，TS会直接报错
const invalidCSS: OnlyColorCSS = {
  color: 'white',
  height: 32, // 报错：height不在允许的属性列表中
  "&:hover": {
    color: 'black',
    border: 2, // 报错：border不在允许的属性列表中
  }
}

如果需要的是排除指定属性、允许其他所有CSS属性的场景，只需要调整工具类型的判断逻辑即可，核心原理是通过递归处理嵌套的选择器结构，避免Pick直接过滤非CSS属性键的问题。

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