Css 使用TypeScript和Formik反应如何在Textfield材质UI中使用图标

我已经使用TypeScript材料UI和Formik设计了一个带有验证的表单。我希望在我的文本字段区域中显示材质UI图标，以下是我的代码：

import React from 'react'
import { Formik, Form, FieldAttributes,useField} from 'formik'
import { TextField } from '@material-ui/core'
import CalendarTodayIcon from '@material-ui/icons/CalendarToday'
import * as yup from 'yup'
import './MainInfo.css'

const MyTextField: React.FC<FieldAttributes<{}>> = ({
  placeholder,type,className,style,
  ...props
}) => {
  const [field, meta] = useField<{}>(props);
  const errorText = meta.error && meta.touched ? meta.error : "";
  return (
    <div className='container'>
    <TextField
    placeholder={placeholder}
    className={className}
    style={style}
    type={type}
    {...field}
    helperText={errorText}
    error={!!errorText}
    id="outlined-basic" 
    variant="outlined"
  />
    </div>
  );
};

export function MainInfo() {

    return (
      <div>
        <Formik
          validateOnChange={true} validationSchema={validationSchema} initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }} onSubmit={(data) => {
            console.log(data)
          }}
        >
          {({values, errors}) => (
            <Form id='my-form' >
              <div>
                <label className='label'>عنوان</label>
                <div >            
                  <MyTextField style={{width:'60%'}}  placeholder='طراح' name='Title' type='input' />
                </div>
                  ...
              </div>
            </Form>
          )}
        </Formik>
      </div>
    )
}

从“React”导入React
从'Formik'导入{Formik，Form，FieldAttributes，useField}
从“@material ui/core”导入{TextField}
从“@material ui/icons/CalendarToday”导入CalendarToday图标
从“yup”导入*为yup
导入“./mainfo.css”
常量MyTextField:React.FC=({
占位符、类型、类名、样式、，
…道具
}) => {
const[field，meta]=useField（props）；
常量errorText=meta.error&&meta.toucted？meta.error:；
返回(
);
};
导出函数mainfo（）{
返回(
{
console.log（数据）
}}
>
{（{值，错误}）=>(
عنوان
...
)}
)
}

---

但问题是我不能添加新的图标属性或InputProp，因为

不接受它。如何为FieldAttributes定义新属性或解决此问题？

使用TextField PropsInputProps自定义输入字段

并使用

开始装饰

，

结束装饰

自定义前缀/后缀

最后，在

输入框中使用图标即可

import { TextField, InputAdornment } from "@material-ui/core";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

<TextField
  id="standard-basic"
  label="Standard"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <ExpandLess />
      </InputAdornment>
    ),
    endAdornment: (
      <InputAdornment position="end">
        <ExpandMore />
      </InputAdornment>
    )
  }}
/>

从“@material ui/core”导入{TextField，InputAdornment}；
从“@material ui/icons/ExpandLess”导入ExpandLess；
从“@material ui/icons/ExpandMore”导入ExpandMore；



参考：


梅：输入道具、开始装饰、结束装饰

梅

在线演示：

TextField最终是一个
元素，它实际上没有包含图标的选项。你想解释一下你到底需要什么吗？