React JSS中createUseStyles传递多props的Typescript类型问题解决

你对问题原因的猜测完全正确。这个问题是TypeScript的泛型类型推断优先级和JSS的createUseStyles类型定义共同导致的，和JSS本身功能无关，你可以同时传入任意多个props属性，不存在单次仅能获取一个属性的限制。

背后的具体逻辑 #

1. createUseStyles本身支持传入泛型来指定接收的props类型，如果你没有主动声明泛型，TypeScript会从你写的第一个用到props的样式规则里，反向推断props的整体类型：
   • 你第一个用到props的样式规则是background: (props) => props.color || ''，TS推断此时props只有color: string一个属性，这个推断结果会作用于整个createUseStyles定义的所有样式规则的props参数
   • 后续你再在其他规则里访问props.textColor，就会因为不在推断的类型范围内报错
2. 你尝试的两种解决方案原理都是覆盖了TS的默认推断：
   • 只要在任意一个props参数里显式声明了包含textColor和color的类型，TS就会把这个更宽泛的类型作为整个样式表的props类型，其他地方就可以正常访问两个属性
   • 直接指定props: ITooltipProps是更规范的做法，后续如果新增props属性只需要维护接口就行，不用重复定义类型

更推荐的写法 #

你可以直接给createUseStyles传入泛型指定props类型，所有样式规则里的props都会自动继承ITooltipProps类型，不需要每个规则里单独声明：

const useStyles = createUseStyles<ITooltipProps>(() => ({
  tooltipWrapper: {
    display: 'inline-block',
    position: 'relative'
  },
  tooltipTip: {
    position: 'absolute',
    borderRadius: '4px',
    left: '50%',
    transform: 'translateX(-50%)',
    padding: '6px',
    color: (props) => props.textColor || '', 
    background: (props) => props.color || '', 
  }
}))

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