时间戳

首页 > 解决方案 > 如何在 Material UI 的 NumberFormat 组件中设置变体轮廓和小尺寸？

reactjs - 如何在 Material UI 的 NumberFormat 组件中设置变体轮廓和小尺寸？

问题描述

我试图传递customInput={<TextField size="small" variant="outlined"/>}组件，但是当我以这种方式传递它时，货币掩码停止工作。它在 Material UI 文档中的显示方式有点不清楚。

import NumberFormat from 'react-number-format';
import { useFormikContext } from 'formik';
import TextField from '@material-ui/core/TextField';
    
export function TextFieldMoney({ name, label, disabled, maxLength }: TextFieldMoneyProps) {
  const { setFieldValue, values } = useFormikContext<any>();

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

  return (
    <NumberFormat
      isNumericString={true}
      thousandSeparator={','}
      decimalSeparator={'.'}
      prefix={'R$ '}
      decimalScale={2}
      fixedDecimalScale={true}
      customInput={TextField}
      onValueChange={(value: any) => handleChange(value)}
      type="text"
    />
  );
}

标签： reactjsmaterial-ui

解决方案

您只需要将它们作为道具传递给NumberFormat组件，例如在线示例检查codesandbox。

<NumberFormat
    isNumericString={true}
    thousandSeparator={','}
    decimalSeparator={'.'}
    prefix={'R$ '}
    decimalScale={2}
    fixedDecimalScale={true}
    customInput={TextField}
    onValueChange={(value: any) => handleChange(value)}
    variant="outlined"
    size="small"
    type="text"
/>

推荐阅读