テーマ

関連

Material UI のデフォルトテーマをカスタマイズすることで自分のサイト合う見た目を作れます。カスタマイズできる内容は以下の7項目があります。

Palette
Typography
Spacing
Breakpoints
z-index
Globals
Density

テーマは@material-ui/core/stylesからcreateMuiThemeユーティリティも持ってきて使います。これはカスタマイズしたい項目だけを持つオブジェクトを引数で渡すと、他の必要な項目を補ってくれます。

import {createMuiTheme} from '@material-ui/core/styles';

console.log(createMuiTheme());

export default () => null;

つまり、何も与えないとデフォルト値を返します。

createMuiThemeによって作ったthemeはThemeProviderに渡すことで、withStylesやmakeStylesといったユーティリティの引数で受け取れます。

import {
  ThemeProvider,
  createMuiTheme
} from '@material-ui/core/styles';

const theme = createMuiTheme();


  {/* ... */}
;

Palette （色）

Material UI で使われるデフォルト値色をカスタマイズできます。これはpaletteプロパティに以下のような名前で各色情報を定義することで行なえます。

primary
secondary
error
warning
info
successs

また、それぞれの値は以下のような構造で定義したオブジェクト、

interface PaletteIntention {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

または以下から好きなデフォルト値色をカスタマイズカラーオブジェクトを渡します。

import {
  amber,
  blue,
  blueGrey,
  brown,
  common,
  cyan,
  deepOrange,
  deepPurple,
  green,
  grey,
  indigo,
  lightBlue,
  lightGreen,
  lime,
  orange,
  pink,
  purple,
  red,
  teal,
  yellow
} from '@material-ui/core/colors';

色を確認しながら選べる公式ツール

この辺は公式で便利なサイトが作られてます。このデフォルト値色をカスタマイズカラーオブジェクト色を確認しながら選べる公式ツールを使って、事前にプライマリ色やセカンダリ色の相性などを確認してから色値を取得できます。

Typography

フォントに関する領域です。typography.fontFamilyでフォントを、typographyy.fontSizeでフォントサイズ（デフォルトは14）、またtypography.htmlFontSizeで HTML のデフォルトフォントサイズをカスタマイズできます。
Material UI では単位はremが使われます。

theme[Typography variant name]へスタイルオブジェクトを置くことでTypographyコンポーネントのそのvariantを使用した時のデフォルト値色をカスタマイズカラーオブジェクト色を確認しながら選べる公式ツールスタイルをカスタマイズできます。

Typographyコンポーネントで使用できるvariant値は以下の通りです。

h1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
srOnly
inherit

Spacing

基準となるスペース値、またはユーティリティを設定する領域です。デフォルトは8でtheme.spacing(2)と実行することで16という値を得れます。

テーマ作成時に以下のようにすると、

const theme = createMuiTheme({
  spacing: 2
});

theme.spacing(2)は4を返すようになります。

またユーティリティにすると好きな単位込みの値を取得できたり、割と自由です。

const theme = createMuiTheme({
  spacing: factor => `${[0, 4, 8, 16, 32, 64][factor]}rem`,
});

// theme.spacing(1) === '4rem'

Breakpoints

レスポンシブな為の値の為領域でデフォルトでは以下のようなブレークポイントになってます。

const breakpoints = {
  values: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920
  }
};

theme.breakpointsには4つのヘルパー関数があります。

up(key)
down(key)
only(key)
between(start, end)

それぞれ@media (...)のようなメディアクエリな文字列を返します。
upやdownは単独のmax-widthやmin-widthルールです。downの場合は指定したキーの値より0.05だけ小さい値が使われます。
onlyやbetweenはmin-widthとmax-widthの組み合わせで、「smサイズだけ」や「smからlgまで」なメディアクエリな文字列を取得できます。

z-index

使う予定のz-index値について名前を付けれます。（定数）
デフォルトでは以下のような値があります。

const zIndex = {
  mobileStepper: 1000,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500
};

Globals

各 Material UI について、まとめてスタイルを変更したり、プロパティのデフォルト値を変えれます。overrides[MUI Component Name]からスタイルを、props[MUI Commponent Name]からプロパティをそれぞれ弄れます。

Density

いくつかのコンポーネントには密度（空間を開ける・開けない）を定義するようなプロパティやスタイルがあり、これを Globals で挙げたような方法でまとめて弄ることで、一貫したルールが保ちやすいまま変えることができます。

テーマ