有没有办法编写一个可以接受 Chakra UI 样式道具的自定义 React 组件？

问题描述

考虑我有这个自定义 React 组件。

import { FormControl,Formlabel,Input } from '@chakra-ui/react'

export interface CustomTextInputProps {
  label: string
  value: string
}

export const CustomTextInput: React.FC<CustomTextInputProps> = ({
  label,value,}) => {
  return (
    <FormControl>
      <Formlabel>{label}</Formlabel>
      <Input value={value} />
    </FormControl>
  )
}

我希望在我的应用程序中包含这个组件，作为它每次实例化时的位置样式。例如，我可以将它包装在一个 Box 中。

import { Box } from '@chakra-ui/react'
import { CustomTextInput } from './custom-text-input'

export const ApplicationForm: React.FC = () => {
  return (
    <Box mt={5}>
      <CustomTextInput />
    </Box>
  )
}

有没有办法编写一个组件，它可以接受直接传递给它的 Chakra UI 样式道具？我们的想法是取消仅用于布局的额外 Box 使用，并最终得到类似的结果。

import { CustomTextInput } from './custom-text-input'

export const ApplicationForm: React.FC = () => {
  return <CustomTextInput mt={5} />
}

我已经研究了 Chakra factory function，但理想情况下，我正在寻找组件本身的解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）