如何在Material UI的NumberFormat组件设置outlined变体与small尺寸

问题根因 #

你传入的customInput参数不符合react-number-format的类型要求：customInput接收的是组件构造函数，不是已经实例化的JSX元素，你直接传入<TextField size="small" variant="outlined"/>会导致react-number-format无法将掩码相关的事件、属性绑定到输入框上，因此掩码功能失效。

解决方案 #

方法1：直接透传属性到NumberFormat组件

react-number-format会将自身未识别的属性自动传递给customInput指定的组件，你可以直接把size、variant、label这些TextField的属性写在<NumberFormat>标签上即可，修改后完整代码如下：

import NumberFormat from 'react-number-format';
import { useFormikContext } from 'formik';
import TextField from '@material-ui/core/TextField';

type TextFieldMoneyProps = {
  name: string;
  label?: string;
  disabled?: boolean;
  maxLength?: number;
}

export function TextFieldMoney({ name, label, disabled, maxLength }: TextFieldMoneyProps) {
  const { setFieldValue } = useFormikContext<any>();

  const handleChange = (value: any) => {
    setFieldValue(name, value.value)
  }

  return (
    <NumberFormat
      isNumericString={true}
      thousandSeparator={','}
      decimalSeparator={'.'}
      prefix={'R$ '}
      decimalScale={2}
      fixedDecimalScale={true}
      customInput={TextField}
      onValueChange={handleChange}
      type="text"
      {/* 以下是TextField专属属性，会自动透传 */}
      size="small"
      variant="outlined"
      label={label}
      disabled={disabled}
      inputProps={{ maxLength }}
    />
  );
}

方法2：包装自定义输入组件

如果你需要更灵活的自定义TextField逻辑，可以把属性包装在函数组件中传入，注意必须把父级传递的props全部展开到TextField上：

<NumberFormat
  // 其他原有属性保持不变
  customInput={(props) => <TextField {...props} size="small" variant="outlined" />}
/>

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