在一个组件中使用 formik-material-ui TextField 和 material-ui TextField 时出现“警告：Prop `className` 不匹配...”

Posted 2023-02-22

【中文标题】在一个组件中使用 formik-material-ui TextField 和 material-ui TextField 时出现“警告：Prop `className` 不匹配...”

【英文标题】："Warning: Prop `className` did not match..." when use formik-material-ui TextField and material-ui TextField in one component

【发布时间】：2021-11-14 00:27:13

【问题描述】：

当我在一个组件中使用 formik-material-ui TextField 和原始 material-ui TextField（通过 fieldToTextField 函数绑定到 Formik）时，我有一个警告

道具类名不匹配。服务器：“PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12”客户端：“PrivateNotchedOutline-legendLabelled-7 PrivateNotchedOutline-legendNotched-8”。

仅当组件的 variant 为 outline 时才会显示此警告。

这是一个产生警告的例子。

//Form.jsx
import React from 'react'
import  TextField  from 'formik-material-ui'
import TextFieldFormik from '../TextFieldFormik.jsx'
import  Formik, Form, Field  from 'formik'

export default function MyForm(props) 
  return (
    <Formik
      enableReinitialize
      initialValues= first: 'first', second: 'second' 
      onSubmit=(values,  setSubmitting ) => 
        console.log(values)
      
    >
      ( submitForm, isSubmitting, errors, touched, values ) => 
        return (
          <Form>
            <Field
              component=TextField //This is a formik-material-ui TextField
              name="first"
              variant="outlined"
              fullWidth
              label="first"
            />

            <Field
              component=TextFieldFormik //This is a material-ui text field bound to Formik with fieldToTextField function
              name="second"
              variant="outlined"
              fullWidth
              label="second"
            />
          </Form>
        )
      
    </Formik>
  )

//TextFieldFormik.jsx
import React from 'react'
import TextField from '@material-ui/core/TextField'
import  fieldToTextField  from 'formik-material-ui'

export default function TextFieldFormik(props) 
  return <TextField ...fieldToTextField(props) />

我的配置：

“下一个”：“^11.1.0”， “反应”：“^17.0.2”， “react-dom”：“^17.0.2” “@material-ui/core”：“^4.11.4”， "formik": "^2.2.9", “formik-material-ui”：“^4.0.0-alpha.1”

【参考方案1】：

将TextFieldFormik.jsx 文件中的import TextField from '@material-ui/core/TextField' 更改为import TextField from '@material-ui/core' 解决了该问题。