我得到一个错误的下载项目使用typescript, mui和formik

Question

我从这个网站下载了一个项目:https://codesandbox.io/s/gn692我得到了一些错误，我不知道如何解决，所以我下载了这个来看看它是如何完成的。它运行在代码沙箱上没有任何问题。我在Idea中安装了它，它也给了我同样的错误。

在文件TextField.tsx:

import React from 'react'
import { FieldProps, getIn } from 'formik'
import { TextFieldProps, TextField } from '@mui/material'
/**
* Material TextField Component with Formik Support including Errors.
* Intended to be specified via the `component` prop in a Formik <Field> or <FastField> component.
* Material-UI specific props are passed through.
*/
export const FormTextField: React.FC<FieldProps & TextFieldProps> = props => {
const isTouched = getIn(props.form.touched, props.field.name)
const errorMessage = getIn(props.form.errors, props.field.name)
const { error, helperText, field, form, ...rest } = props
return (
<TextField
variant="outlined"
error={error ?? Boolean(isTouched && errorMessage)}
helperText={helperText ?? ((isTouched && errorMessage) ? errorMessage : undefined)}
{...rest}
{...field}
/>
)
}

我给出的错误如下:其他{…}领域{…}

Error1:输入…Pick<(FieldProps<any,>,StandardTextFieldProps,{孩子吗?: ReactNode}) | (FieldProps<any,>,FilledTextFieldProps,{孩子吗?: ReactNode}) | (FieldProps<any,>,OutlinedTextFieldProps,{孩子吗?: ReactNode})， "|"onBlur"|"onChange"|"onFocus"|"variant"|"InputProps"|"inputProps"|"autoComplete"|"autoFocus"|"children"|"color"|……比;不能赋值给类型React。ReactNode

Error2:类型……FieldInputProps不能分配给React类型。ReactNode

我不知道在哪里寻找错误。请帮帮我。

Answer 1

你的代码是不是与链接沙盒相同。具体来说，您已经更改了依赖项。沙盒使用旧的@material-ui:

import { TextFieldProps, TextField } from '@material-ui/core'

但是你使用的是新的@mui:

import { TextFieldProps, TextField } from '@mui/material'

新的API是而不是向后兼容的。错误的内容告诉你,restfield,分别不分配TextField的道具,这是真正的新TextField

但不明显的老了。这是关于Material-UI过渡到MUI的帖子。

如果你可以接受使用旧的Material-UI，你可以通过使用深度来解决这个问题，就像在package.json沙盒中一样。但是，您应该注意那些已经打过补丁的旧软件包中没有任何安全问题。你可以使用npm audit/yarn audit来检查和修复这些问题。

如果你想使用新的MUI API，你需要做一些关于如何与Formik一起使用它的研究。虽然Formik文档似乎已经过时了，但这里有一个我发现的使用新API的示例，可能会有所帮助。您可能想要向Formik人员提交一个bug以更新他们的文档。这是相关的存储库。