TypeScript+Chakra UI如何正确支持StyleProps？解决py属性报错

报错原因 #

你当前的子组件Props接口定义存在问题：

• 接口里的props: any完全多余，你在组件中使用的{ bar, ...props }属于剩余属性解构，解构出的props会包含除bar之外的所有传入属性（比如父组件传的py）
• TypeScript会严格校验父组件传入的所有属性是否存在于子组件的Props类型中，现在py不在定义范围内，因此抛出类型不匹配错误

解决Chakra UI py属性报错的具体步骤 #

1. 导入Chakra UI的BoxProps类型：由于子组件渲染的是Chakra的Box，而Box接受的属性类型为BoxProps，它包含了所有Chakra样式属性（如py、px等）
2. 修改子组件的Props接口：让接口扩展BoxProps，同时保留自定义的bar属性
3. 移除多余的props: any定义：剩余属性解构会自动继承BoxProps中的所有属性

修改后的子组件代码：

// 导入Chakra的Box组件和BoxProps类型
import { Box, BoxProps } from "@chakra-ui/react";

// 让Props扩展BoxProps，同时定义自定义属性bar
interface Props extends BoxProps {
  bar: string;
}

export default function Child({ bar, ...props }: Props) {
  return (
    <Box {...props}>
      // 原有业务代码
    </Box>
  );
}

TypeScript中展开Props的正确方式 #

TypeScript里展开Props没有特殊的实现技巧，核心是让组件的Props类型准确包含所有可能传入的属性：

• 自定义属性直接在接口中定义
• 若要传递给第三方组件（如Chakra组件、原生HTML元素）的属性，直接让Props扩展对应的类型（比如BoxProps、HTMLDivElement的属性类型）
• 用剩余属性解构...props收集不需要单独处理的属性，再通过{...props}传递给子元素，只要类型匹配，TypeScript就不会报错

修改完成后，父组件传入的py属性会被BoxProps包含，TypeScript会认可该属性的类型，报错自然消失。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ