0

考虑一下我有这个自定义的 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 工厂功能，但理想情况下，我正在寻找组件本身的解决方案。

4

1 回答 1

0

子自定义组件

import { forwardRef,Box, Button, BoxProps } from "@chakra-ui/react";
export const FloatButton = forwardRef<BoxProps, "div">((props, ref) => (
  <Box px="4" py="5" rounded="none" shadow="lg" ref={ref} {...props}>
    <Button>like this?</Button>
  </Box>
));

父组件

import { Link } from "@chakra-ui/react";
import { FloatButton } from "../components/atoms/buttons/FloatButton";

export default function Home() {
  return (
    <div>
      {/* <Link href="/projects">project index</Link>
      <Link href="/users/1">users detail</Link> */}
      <FloatButton bg="#ff0">like this?</FloatButton>
    </div>
  );
}

如何 ？

在此处输入图像描述

于 2021-08-23T19:15:28.807 回答