Material-UIのコンポーネントを拡張する

このような関数MainのうちTextFieldを再利用したい。このような複数行にわたるコードは、DOMの構造を推測しづらくします。

const Main: FunctionComponent = () => {
  return (
    <TextField
      fullWidth
      onChange={event => setText(event.target.value)}
      placeholder={'検索'}
      value={text}
      variant={'filled'}
      InputProps={{
        startAdornment: (
          <InputAdornment position={'start'}>
            <Search />
          </InputAdornment>
        ),
      }}
    />
  )
}

PropsにはTextFieldPropsを用いる。

type Props = TextFieldProps

const TextFieldSearch: FunctionComponent<Props> = props => {
  return (
    <TextField
      {...props}
      fullWidth
      variant={'filled'}
      InputProps={{
        startAdornment: (
          <InputAdornment position={'start'}>
            <Search />
          </InputAdornment>
        ),
      }}
    />
  )
}

独自のPropsを定義したい場合はこのようにする。

type Props = TextFieldProps & { text: string }

TextFieldをTextFieldSearchに差し替えることで、関数Mainは結果的にこのようになる。

const Main: FunctionComponent = () => {
  return (
    <TextFieldSearch
      onChange={event => setText(event.target.value)}
      placeholder={'検索'}
      value={text}
    />
  )
}