Estoy recibiendo este error:
Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'ClassAttributes<HTMLInputElement>'. Types of property 'ref' are incompatible. Type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'RefObject<HTMLDivElement>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<HTMLInputElement>'. Type 'HTMLDivElement' is missing the following properties from type 'HTMLInputElement': accept, alt, autocomplete, capture, and 51 more.ts(2322)En este código:
import _ from 'lodash' import { TextFieldProps } from '@mui/material/TextField/TextField' ... _renderSimple (sharedProps: TextFieldProps): JSX.Element { const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps']) return ( <div className={sharedProps.className}> <input {...inputProps} placeholder={sharedProps.placeholder} autoComplete={this.props.autoComplete} data-testid={this.props.dataTestId} /> {this._renderError()} </div> ) } lo cual, en mi opinión, no tiene sentido, ya que estoy poniendo inputProps en input , no en div . ¿Qué me estoy perdiendo?
Los tipos no son los mismos, está intentando usar un tipo material-ui en una entrada de vainilla.
La entrada estándar 'React.DetailedHTMLProps<React.InputHTMLAttributes, HTMLInputElement>' y material-ui TextFieldProps son definiciones de tipos independientes.
Puede forzarlo haciendo lo siguiente, pero tenga en cuenta que podría tener efectos secundarios no deseados
const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps']) as unknown as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>