javascript - Formik MaterialUI 输入掩码

Question

我有一个 formik 表单，字段通常如下所示:

<Field
          component={TextField}
          name="phoneNumber"
          type="text"
          required
          label={t('containers:CommonFields.phoneNumber')}
          variant="outlined"
          margin="normal"
/>

Field 是从 Formik 导入的，TextField 只是样式 formik-material-ui文本字段:

import { TextField } from 'formik-material-ui';
import breakpoints from 'styles/breakpoints';
import styled from 'styled-components/macro';

export default styled(TextField)`
  ${breakpoints.md`
    max-width: 320px;
  `};
  width: 100%;
`;

我想要做的是使用 react-input-mask 将输入掩码添加到该字段。这是我到目前为止所得到的:

https://codesandbox.io/s/priceless-currying-hryv1

不幸的是，输入未呈现

Answer 1

将 TextField 导入更改为

import { TextField } from "@material-ui/core";

updated sample

或者，如果您想保留 formik textfield然后检查这个demo