Reusable Custom Styled TextField with CSS classes in MUI

I am trying to make this component reusable, but whenever I wrap this component into a wrapped component I am getting an error.
I am deliberately try to use scss classes and not to use styled-components.

Here is the non-reusable component:

      <InputField
        id="<id_name>"
        label="<label>"
        variant="outlined"
        inputRef={inputRef}
        value={value}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setValue(e.target.value)
        }}
        InputProps={{
          classes: {
            root: styles.search__field,  // this is standart modular scss class
            notchedOutline: styles.search__field, // this is standart modular scss class
          },
        }}
        InputLabelProps={{
          classes: {
            shrink: styles.search__label__focused, // this is standart modular scss class
          },
        }}
      />

I tried to write an reusable component like this:

import { TextField, type TextFieldProps } from "@mui/material"

type InputFieldProps = {
  rootClass: string
  borderClass: string
  shrinkLabelClass: string
} & TextFieldProps

const InputField = ({
  rootClass,
  borderClass,
  shrinkLabelClass,
  InputProps,
  InputLabelProps,
  ...restProps
}: InputFieldProps) => {
  return (
    <TextField
      {...restProps}
      InputProps={{
        classes: {
          root: rootClass,
          notchedOutline: borderClass,
        },
      }}
      InputLabelProps={{
        classes: {
          shrink: shrinkLabelClass,
        },
      }}
    />
  )
}

but I am getting that error:

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

Type ‘{ InputProps: { classes: { root: string; notchedOutline: string; }; }; InputLabelProps: { classes: { shrink: string; }; }; onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined; … 284 more …; onTransitionEndCapture?: TransitionEventHandler<…> | undefined; }’ is not assignable to type ‘IntrinsicAttributes & TextFieldProps’.
The types of ‘InputProps.classes’ are incompatible between these types.
Type ‘{ root: string; notchedOutline: string; }’ is not assignable to type ‘Partial’.
Property ‘notchedOutline’ does not exist on type ‘Partial’.ts(2322)

I also tried to change the rootClass, borderClass, shrinkLabelClass type string to Partial but that time I am getting error from "root" property saying that needs to be a string type.

Thanks in advance for your time.

>Solution :

The problem here is that you are trying to add props (notchedOutline) that only applies to outlined variant of TextField. So you can add wrapper like this for the outlined variant

type InputFieldProps = {
    rootClass: string
    borderClass: string
    shrinkLabelClass: string
} & OutlinedTextFieldProps

const OutlinedInputField = ({
    rootClass,
    borderClass,
    shrinkLabelClass,
    InputProps,
    InputLabelProps,
    ...restProps
}: InputFieldProps) => {
    return (
        <TextField
            {...restProps}
            InputProps={{
                classes: {
                    root: rootClass,
                    notchedOutline: borderClass,
                },
            }}
            InputLabelProps={{
                classes: {
                    shrink: shrinkLabelClass,
                },
            }}
        />
    )
}