包装Chakra UI组件时如何继承原组件PropTypes自动补全提示

VS Code的智能补全依赖静态类型推导，你封装组件时没有显式声明Props继承Chakra Button的原生属性类型，编辑器只能识别到代码里显式用到的testPropColor，无法感知透传的其余原生Props，所以不会给出补全。
另外你贴的代码里有个笔误：<ChakraButton color="testPropColor"这里把属性值写死成了字符串"testPropColor"，应该绑定变量color={testPropColor}，不然自定义的颜色属性不会生效。

根据项目技术栈选对应方案即可：

TypeScript 项目（类型提示最完整，推荐） #

直接从Chakra UI引入Button的原生Props类型，和自定义属性合并后标注给组件：

import { Button as ChakraButton, ButtonProps as ChakraButtonProps } from '@chakra-ui/react'

interface CustomButtonProps extends ChakraButtonProps {
  testPropColor: string
}

export default function Button({ testPropColor, children, ...props }: CustomButtonProps) {
  return (
    <ChakraButton color={testPropColor} {...props}>
      {children}
    </ChakraButton>
  )
}

JavaScript 项目（无需配置TS） #

通过JSDoc显式标注Props的类型引用，VS Code可以直接识别JSDoc里的类型声明给出补全：

import { Button as ChakraButton } from '@chakra-ui/react'

/**
 * 自定义包装按钮
 * @param {object} props
 * @param {string} props.testPropColor 自定义测试颜色属性
 * @param {import('@chakra-ui/react').ButtonProps} props 透传Chakra UI Button原生属性
 */
export default function Button({ testPropColor, children, ...props }) {
  return (
    <ChakraButton color={testPropColor} {...props}>
      {children}
    </ChakraButton>
  )
}

修改完成后回到业务调用页面，输入size、variant、onClick、bg这类Chakra Button原生支持的属性时，VS Code会正常弹出补全提示，同时自定义的testPropColor提示也会保留。

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