テーマ

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

  1. Palette
  2. Typography
  3. Spacing
  4. Breakpoints
  5. z-index
  6. Globals
  7. Density

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

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

console.log(createMuiTheme());

export default () => null;

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

createMuiThemeによって作ったthemeThemeProviderに渡すことで、withStylesmakeStylesといったユーティリティの引数で受け取れます。

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

const theme = createMuiTheme();

<ThemeProvider theme={theme}>
  {/* ... */}
</ThemeProvider>;

Palette (色)

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

  1. primary
  2. secondary
  3. error
  4. warning
  5. info
  6. 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

基準となるスペース値、またはユーティリティを設定する領域です。デフォルトは8theme.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つのヘルパー関数があります。

  1. up(key)
  2. down(key)
  3. only(key)
  4. between(start, end)

それぞれ@media (...)のようなメディアクエリな文字列を返します。
upやdownは単独のmax-widthmin-widthルールです。downの場合は指定したキーの値より0.05だけ小さい値が使われます。
onlybetweenmin-widthmax-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 で挙げたような方法でまとめて弄ることで、一貫したルールが保ちやすいまま変えることができます。