【Material UI】OutlinedInput をテーマ機能でとても細くする

　Material UI は React のコンポーネントライブラリです。
Material-UI： A popular React UI framework
　便利なものが揃っているのですが、そのコンポーネントの画面上のサイズは基本的に大きく、入力欄を多数設けるなどして一画面上の情報の密度を増やしたい時に困ります。密度を増やしにくい原因の一つがデフォルトオプションの範囲での Input コンポーネントのサイズです。デフォルトの状態は次です。

　この記事では自分がよく使っている Input コンポーネントの一つである OutlinedInput コンポーネントを細くする方法について紹介します。

　こういった見た目の問題を解決したい時、よくある解決法が CSS です。しかし Material UI の生成する HTML は煩雑な上、やたらめったらクラスをつけるため CSS での管理を積極的にしたくありません。Material UI 中で設定できるものに関しては内部で済ませたいです。ここでは Material UI が用意している機能であるテーマを用います。

【React】【Material-UI】テーマ機能で Material-UI コンポーネントのデフォルト値や CSS を定義する – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発

　まずはデフォルトで用意されている props の margin の dense オプションを片っ端から適用します。その名の通り密集した見た目を作りあげます。

const theme = createMuiTheme({
  props: {
    MuiFormHelperText: {
      margin: "dense"
    },
    MuiInputLabel: {
      margin: "dense",
      shrink: true // フォーカスする前からラベルを外枠上に置くための props です
    },
    MuiOutlinedInput: {
      margin: "dense",
      notched: true // フォーカスする前からラベルを外枠上に置くための props 
    }
  }
});

　まあまあ細くなりました。最初の状態に比べて入力欄内部のパディングが減ってスリムな感じです。
　場合によっては更に小さくしたくなります。これは次の様にテーマ中で指せる CSS をつけると良いです。

const theme = createMuiTheme({
  overrides: {
    MuiFormHelperText: {
      marginDense: {
        // デフォルトでは0.8571428571428571rem
        fontSize: "0.6rem"
      }
    },
    MuiInputLabel: {
      marginDense: {
        // デフォルトでは
        //     font-size: 1.1428571428571428rem;
        fontSize: "0.75em",
        // scss 的に指定できます。クラス名等必須で構造を把握する必要が出てくるので割と最終手段
        "&.MuiInputLabel-outlined.MuiInputLabel-shrink": {
          transform: "translate(14px, -4px) scale(0.75)"
        }
      }
    },
    MuiOutlinedInput: {
      marginDense: {
        // デフォルトでは
        //     font-size: 1.1428571428571428rem;
        fontSize: "0.75em"
      },
      notchedOutline: {
        "& span": {
          paddingRight: "0"
        }
      },
      inputMarginDense: {
        // デフォルトでは
        //     padding-top: 10.5px;
        //     padding-bottom: 10.5px;
        paddingTop: "7.5px",
        paddingBottom: "4.5px"
      }
    }
  },
  ...先ほどの props についてのテーマ
});

　ここまで細くすると嫌う人も増えるでしょうがかなり詰めることができます。