【Material-UI】必ず設定しておきたいTheme項目

[Material-UI] ではアプリ全体の見た目や動作をThemeで設定することができます。

過去に数回のフロントエンド開発で [Material-UI] を使ってきたのですが、その中に必ずと言っていいほど設定するTheme項目があります。

そんな必ず設定するようなTheme項目をまとめました。

対象バージョンは`4.0.0`以降です。

尚、ここで紹介した設定項目を全て適用したThemeとデフォルトのThemeを比較できるサンプルを作成したので参考にしてください。
[![Edit MUI4.0 customize theme ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mui40-theme-jocd9?fontsize=14&view=preview)

[Material-UI]:https://material-ui.com/



# 必ず設定しておきたいTheme項目

- [ボタンのラベルが大文字になるのを防ぐ - `typography.button.textTransform="none"`](#ボタンのラベルが大文字になるのを防ぐ---typographybuttontexttransformnone)
- [TextField のバリエーションを変更する - `props.MuiTextField.variant`](#textfield-のバリエーションを変更する---propsmuitextfieldvariant)
- [テーマカラーの設定 - `palette.primary`](#テーマカラーの設定---paletteprimary)
- [入力コントロールの色を統一する - `props.{MuiCheckbox,MuiRadio,MuiSwitch}`](#入力コントロールの色を統一する---propsmuicheckboxmuiradiomuiswitch)



# ぎゅうぎゅう詰めにしたいときに設定する項目

業務アプリではとにかく画面に情報をぎゅうぎゅう詰めにしたいという要望があります。
そんな時に設定する項目です。

- [フォントサイズを小さくする - `typography.fontSize`](#フォントサイズを小さくする---typographyfontsize)
- [ヘッダの高さを小さくする - `mixins.toolbar.minHeight`](#ヘッダの高さを小さくする---mixinstoolbarminheight)
- [リストのサイズを小さくする - `props.MuiList.dense=true`](#リストのサイズを小さくする---propsmuilistdensetrue)
- [テーブルのサイズを小さくする - `props.MuiTable.size="small"`](#テーブルのサイズを小さくする---propsmuitablesizesmall)



# ボタンのラベルが大文字になるのを防ぐ - `typography.button.textTransform="none"`

[Material-UI]初心者が必ずハマるポイントです。
デフォルトではボタンのラベルが小文字から大文字に変換されてしまいます。
これを防ぐには`typography.button.textTransform="none"` を設定します。

```ts:
const theme = createMuiTheme({
    typography: {
        button: {
            textTransform: "none"
        }
    }
});
```



# TextField のバリエーションを変更する - `props.MuiTextField.variant`

[Material-UI]のTextFieldには3つのバリエーションがあります。

[standard](https://material-ui.com/components/text-fields/#textfield)

![material-ui.com_components_text-fields_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35192/9a523658-c32c-528c-0b82-51a0b2e0a8cd.png)

[outlined](https://material-ui.com/components/text-fields/#outlined)
![material-ui.com_components_text-fields_ (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35192/fbf90fcc-7a0c-fd9e-5372-49d27ac73195.png)

[filled](https://material-ui.com/components/text-fields/#filled)
![material-ui.com_components_text-fields_ (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35192/435f4787-fb20-0f8c-399c-ff1bb7eefe59.png)

デフォルトは`standard`なのですが、これは現在マテリアルデザインのドキュメントには定義されていないスタイルです。
`outlined`または`filled`への変更をお勧めします。

```ts:
const theme = createMuiTheme({
   props: {
        MuiTextField: {
            variant: "outlined"
        }
    },
});
```



# テーマカラーの設定 - `palette.primary`

サンプルアプリならデフォルトのままでもいいですが、ちゃんとしたアプリなら最低限primaryカラーだけでも設定しておきましょう。

設定方法は[ドキュメントに書いてある通り](https://material-ui.com/customization/palette/)ですが、以下のように色々な設定方法があります。

```ts:定義済みのHUEから指定する
import {blue} from "@material-ui/core/colors";
const theme = createMuiTheme({
    palette: {
        primary: blue,
    }
});
```
```ts:HUEとShadeで指定する。mainのみ指定すればlightやdarkは自動設定される。
const theme = createMuiTheme({
    palette: {
        primary: {
            main: blue["500"],
        }
    }
});
```
```ts:main以外も指定する
const theme = createMuiTheme({
    palette: {
        primary: {
            light: blue["300"],
            main: blue["500"],
            dark: blue["700"],
        }
    }
})
```
```ts:独自の色を指定する
const theme = createMuiTheme({
    palette: {
        primary: {
            light: "#64b5f6",
            main: "#2196f3",
            dark: "#1976d2",
        }
    }
})
```

どんな色にしたいか決めるには[ドキュメントで紹介されているツール](https://material-ui.com/customization/color/#color-tool)を使うと良いでしょう。



# 入力コントロールの色を統一する - `props.{MuiCheckbox,MuiRadio,MuiSwitch}`

`Checkbox`、`Radio`、`Switch`の3つのコンポーネントはデフォルトカラーが`secondary`になっています。

好みの問題ですが、`primary`にしておいたほうが統一感があると思います。

```ts:
const theme = createMuiTheme({
    props: {
        MuiCheckbox: {
            color: "primary"
        },
        MuiRadio: {
            color: "primary"
        },
        MuiSwitch: {
            color: "primary"
        },
    }
});
```


# フォントサイズを小さくする - `typography.fontSize`

```ts:
const theme = createMuiTheme({
    typography: {
        fontSize: 12,
    }
});
```

# ヘッダの高さを小さくする - `mixins.toolbar.minHeight`

```ts:
const theme = createMuiTheme({
    mixins: {
        toolbar: {
            minHeight: 42
        }
    },
});
```

# リストのサイズを小さくする - `props.MuiList.dense=true`

```ts:
const theme = createMuiTheme({
    props: {
        MuiList: {
            dense: true
        },
    }
});
```

# テーブルのサイズを小さくする - `props.MuiTable.size="small"`

```ts:
const theme = createMuiTheme({
    props: {
        MuiTable: {
            size: "small"
        },
    }
});
```