Material-UIでテキストフィールドをカスタマイズして実装する方法

import React from "react";

import {
  FormControl,
  FormLabel,
  FormHelperText,
  OutlinedInput,
} from "@material-ui/core/";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

/* ... */

export function TextField({
  error,
  disabled,
  label,
  id,
  name,
  type,
  placeholder,
  required,
  onBlur,
  defaultValue,
  helperText,
}) {
  /* ... */

  const theme = createMuiTheme({
    overrides: {
      MuiFormControl: {
        /* 全体のスタイル */
      },
      MuiFormLabel: {
        /* ラベルのスタイル */
      },
      MuiOutlinedInput: {
        /* フィールドのスタイル */
      },
      MuiFormHelperText: {
        /* ヘルパーテキストのスタイル */
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <FormControl error={error} disabled={disabled}>
        <FormLabel>
          <div>{label}</div>
          <OutlinedInput
            fullWidth
            id={id}
            name={name}
            type={type}
            placeholder={placeholder}
            required={required}
            onBlur={onBlur} // onBlur にフィールド変更時のイベントを渡す
            defaultValue={defaultValue} // defaultValue でフィールドの値を持つ
          />
        </FormLabel>
        <FormHelperText>{helperText}</FormHelperText>
      </FormControl>
    </ThemeProvider>
  );
}