组件Props中返回样式对象的函数的TypeScript准确类型是什么？

错误原因 #

你给styles.placeholder赋值的是一个返回样式对象的函数，但目标类型Properties<string | number, string & {}>（一般来自csstype库，代表静态CSS属性键值对）只接受直接的样式对象，不支持函数类型，因此触发类型不匹配报错。

解决方案 #

1. 自定义组件：修改Props类型定义 #

如果这是你自己开发的组件，直接调整styles字段的类型定义，让placeholder支持返回样式的函数：

import type { Properties } from 'csstype';

// 定义组件的样式配置类型
type ComponentStyles = {
  placeholder: () => Properties<string | number>;
};

// 组件的Props类型
type YourComponentProps = {
  styles?: ComponentStyles;
};

// 组件实现
const YourComponent = ({ styles }: YourComponentProps) => {
  // 组件逻辑代码
};

2. 第三方组件：类型断言或扩展类型 #

如果是使用第三方UI库的组件，且该组件确实支持placeholder传入函数（比如动态生成样式的场景），可以用类型断言指定准确类型：

import type { Properties } from 'csstype';

// 使用类型断言匹配正确类型
styles={{
  placeholder: () => ({
    height: 16,
    fontSize: 14,
    lineHeight: 1.14,
    fontFamily: 'Roboto',
    color: '#5c6f7b',
  }),
}} as { placeholder: () => Properties<string | number> }

补充：带参数的样式函数 #

如果你的样式函数需要接收参数（比如主题、组件状态），可以扩展类型中的函数参数：

// 假设主题类型为YourTheme
type ComponentStyles = {
  placeholder: (theme: YourTheme) => Properties<string | number>;
};

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