javascript - ¿Cómo utilizo TextfieldProps de Material UI Props para una aplicación React?

Me gustaría escribir un TextInput para un inicio de sesión como un solo componente. Este campo de texto de Material UI, por supuesto, debería contener diferentes props. ¿Cómo puedo implementar esto con Textfieldprops de Material UI?

Este es el código para el TextInput.tsx

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

interface InputProps {
   textinput: TextFieldProps
}


const TextInput: React.FC<InputProps> = (textinput) => {
      return(
           <div>
              <Textfield id={textinput.id} label={textinput.label} variant={textinput.variant}/>
           </div>
}
export default TextInput

Este es el código para Login.tsx

import React from 'react'
import TextInput from "./Input/TextInput"

const Login: React.FC = () => {
      return(
         <div>
            <TextInput ??? => What has to go in? You can't do that id="outline-basic"/>
         </div>
}

export default Login

¿Qué tengo que insertar en Login.tsx para el TextInput? ¿No lo entiendo muy bien? ¿Tengo que heredar en la interfaz para el componente TextInput?

Respuesta #1

Puedes encontrar todas las propiedades para TextField aquí. Puedes hacer tu código así:

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

const TextInput: React.FC<InputProps> = ({ id: number, label: string, error: string, ...rest: TextFieldProps }) => {
  return(
    <div>
      <label htmlFor={id}> // i've created it just for example. TextField includes Label component
        {label}
      </label>
      <Textfield id={id} {...rest} />
      <span>{error}</span> i've created it just for example. TextField includes helper component
    </div>
  )
}

export default TextInput

y luego puedes hacer algo así

import React from 'react'

import TextInput from "./Input/TextInput"

const Login: React.FC = ({ onChange }) => {
      return(
         <div>
            <TextInput
              id="outline-basic"
              label="some label"
              error="some error"
              onChange={onChange}
              placeholder="Some placeholder"
              name="dog"
              fullWidth
            />
         </div>
}

export default Login

onChange, placeholder, name, fullWidth - TextFieldProps
id, label, error - just props

Respuesta #2

si lo usas así:

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

interface Props extends TextFieldProps {
  someNewProp: string
}

recibirás el siguiente error: (alias) tipo TextFieldProps=StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps import TextFieldProps

Una interfaz solo puede extender un tipo de objeto o una intersección de tipos de objeto con miembros conocidos estáticamente.ts(2312).

Puedes seguir estas instrucciones para arreglarlo.

type Props = {
  someNewProp: string
} & TextFieldProps