如何解决有没有办法编写一个可以接受 Chakra UI 样式道具的自定义 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 举报,一经查实,本站将立刻删除。