Wrap mui TextField and accept default props-CodePudding

This might be a more general React question, but how can I wrap a component like TextField from mui and provide new props the old ones? I've tried this so far but I don't understand how to access the other props.

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

interface MyArgs {
   customProp?: boolean;
}

export type MyProps = MyArgs & TextFieldProps;

export const MyCustomInput: React.FC<MyProps> = ({
  customProp = false
}) => {
   return (
       <TextField 
           // How to access things from TextFieldProps? 
           required={??}
       /> 
   )
}

CodePudding user response：

You could extend TextFieldProps from your component interface:

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

interface MyCustomInputProps extends TextFieldProps {
  customProp?: boolean;
}

export const MyCustomInput = (props: MyCustomInputProps) => {
  const { customProp = false, ...textFieldProps } = props;

  // Do whatever you want with `customProp`

  return (
    <TextField {...textFieldProps} />
  );
}