LoginSignup
289

More than 3 years have passed since last update.

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

Posted at

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

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

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

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

尚、ここで紹介した設定項目を全て適用したThemeとデフォルトのThemeを比較できるサンプルを作成したので参考にしてください。
Edit MUI4.0 customize theme

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

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

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

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

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

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

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

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

standard

material-ui.com_components_text-fields_.png

outlined
material-ui.com_components_text-fields_ (2).png

filled
material-ui.com_components_text-fields_ (3).png

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

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

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

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

設定方法はドキュメントに書いてある通りですが、以下のように色々な設定方法があります。

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

どんな色にしたいか決めるにはドキュメントで紹介されているツールを使うと良いでしょう。

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

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

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

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

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

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

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

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

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
289