在用几个输入构建一个用户界面时，我决定迁移基本输入组件，形成一个我可以使用的单一组件，虽然这不是真正的问题。下面是它的代码。为了方便和难忘的使用输入。

import {
  FormControl,
  FormErrorMessage,
  FormHelperText,
  FormLabel,
  Input,
} from "@chakra-ui/react";

const DefaultInput = ({
  isInvalid,
  label,
  helperText,
  errorMessage,
  ...otherProps
}) => {
  return (
    <FormControl isInvalid={isInvalid}>
      {label && <FormLabel>{label}</FormLabel>}
      <Input
        variant="outline"
        padding="25px 10px"
        margin="10px 0px"
        border={"0px"}
        {...(isInvalid && { border: "0px" })}
        {...otherProps}
      />
      {!isInvalid ? (
        <FormHelperText>{helperText}</FormHelperText>
      ) : (
        <FormErrorMessage>{errorMessage}</FormErrorMessage>
      )}
    </FormControl>
  );
};

export default DefaultInput;

像这样使用它，但它似乎没有注意到“最大”属性。

<DefaultInput
   value={custom.credits}
   isInvalid={creditsError}
   helperText={"Minimum of 50 Credits."}
   errorMessage={"Please enter a valid number above 50."}
   maxW={isNotSmallerScreen ? "50%" : "70%"}
   fontSize={!isNotSmallerScreen ? "12px" : "16px"}
   onChange={handleCustomCredit}
   type="number"
   placeholder="Enter Credits"
   name="credits"
   max="5000"
/>

我也尝试在我创建的组件中手动声明“max”和“type”，但仍然一无所获。

.....
      <Input
        variant="outline"
        padding="25px 10px"
        margin="10px 0px"
        border={"0px"}
        max="5000"
        type="number"
        {...(isInvalid && { border: "0px" })}
        {...otherProps}
      />
.....