カテゴリー: FrontEnd

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに
2 Themeとは
3 Themeのセットアップ
4 Themeの設定方法
5 MUI Theme Creator
6 さいごに
7 おすすめ書籍

はじめに

最近、MUIを使ったReactアプリケーションを開発しています。MUIには様々なコンポーネントがありますが、その見た目をカスタマイズする方法を調べました。

Themeとは

MUIはデフォルトでカラーやシャドウ、フォントなどが揃っていて、すぐに使い始めることができる状況となっていますが、実際には開発するサービスのブランドに合わせて変更する必要が出てくると思います。
そうした場合に、MUIではThemeを設定することで、カラーやシャドウ、フォントなどの見た目を一括管理することができます。

Themeのセットアップ

まずは、Themeを使用できるようにします。App.tsxにThemeProviderコンポーネントを追加し、全てのUIコンポーネントをこの配下に置くようにします。今回は、テーマの変更を確認するためのコンポーネントを配置しています。

import React, { useContext } from "react";
import "./App.css";
import Button from "@mui/material/Button";
import { createTheme, Snackbar, ThemeProvider } from "@mui/material";
import { themeOptions } from "./theme-options";

function App() {
  const theme = createTheme(themeOptions);
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Box sx={{ flexGrow: 1 }}>
          <AppBar position="static">
            <Toolbar>
              <IconButton
                  size="large"
                  edge="start"
                  color="inherit"
                  aria-label="menu"
                  sx={{ mr: 2 }}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                Primary
              </Typography>
              <Button color="inherit">Login</Button>
            </Toolbar>
          </AppBar>
        </Box>
        <Alert severity="info">This is an info alert — check it out!</Alert>
        <Stack direction="row" spacing={2} m={2}>
          <Button variant="outlined" color="success">
            Success
          </Button>
          <Button variant="contained" color="error">
            Error
          </Button>
        </Stack>
        <Fab sx={{position: 'absolute', bottom: 16, right: 16}} color="secondary" aria-label="add">
          <AddIcon />
        </Fab>
        <Snackbar open={true}>
          <Alert severity="warning">This is a warning message!</Alert>
        </Snackbar>
      </ThemeProvider>
    </div>
  );
}

export default App;

次に、theme-options.tsを追加します。

import { ThemeOptions } from "@mui/material";
import {blue, cyan, green, orange, purple, red} from "@mui/material/colors";

export const themeOptions: ThemeOptions = {
  // ここでテーマをカスタマイズします。
};

Themeの設定方法

よく使うと思われる、Pallete、Elevationのシャドウ、タイポグラフィー、そしてコンポーネントの設定方法を説明します。

Palette

コンポーネントで使用されるカラーを変更します。

colorオブジェクト

colorオブジェクトを使うと、あらかじめ用意されているパレットからカラーを変更することができます。ColorはこちらのHUEを選択します。(SHADEは指定することができず、Paletteが自動的に指定します。)

import { ThemeOptions } from "@mui/material";
import {blue, cyan, deepPurple, green, orange, red} from "@mui/material/colors";

export const themeOptions: ThemeOptions = {
  palette: {
    primary: blue,
    secondary: deepPurple,
    error: red,
    warning: orange,
    info: cyan,
    success: green
  },
};

直接色を指定する

colorオブジェクトでの色指定では、main, light, dark, contrastTextを個別で指定することはできません。その場合、直接色を指定することができます。

import { ThemeOptions } from "@mui/material";
import {cyan, green, orange, red} from "@mui/material/colors";

export const themeOptions: ThemeOptions = {
  palette: {
    primary: {
      main: orange[900],
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      contrastText: '#ffcc00',
    },
    error: red,
    warning: orange,
    info: cyan,
    success: green,
    contrastThreshold: 3,
    totalOffset: 0.2,
  },
};

primaryはmainしか指定していませんが、light dark contrastTextは、mainの色から計算されます。secondaryではdarkが指定されていませんが、mainの色から計算されます。
また、色の指定方法として、colorsから指定する方法と、カラーコードでの指定方法があります。MUIを使用している以上、colorsにある色から、HUEとSHADEを指定する方法がおすすめです。

contrastThresholdとtotalOffsetは必須ではありませんが、main以外の色の計算結果をカスタマイズするのに使用できます。contrastThresholdは、contrastTextの色の計算時に使用される閾値です。
totalOffsetは、0.0～1.0の間で指定し、値を大きくすればするほど、lightがより明るくなり、darkがより暗くなります。

Elevationのシャドウ

Eevationすると入るシャドウは、shadowsで設定します。shadowsは25個の配列で、0個目は必ず’none’を指定しますが、それ以外はelevationの1～25の段階ごとにshadowの設定をします。shadowは、CSSのbox-shadowの指定方法と同じです。
シャドウを完全に無くすには次のようにします。

import { ThemeOptions } from "@mui/material";
import {cyan, green, orange, red} from "@mui/material/colors";
import shadows, {Shadows} from "@mui/material/styles/shadows";

export const themeOptions: ThemeOptions = {
  shadows: shadows.map(() => 'none') as Shadows
};

タイポグラフィー

Font FamilyやFont Sizeを変更することができます。

import { ThemeOptions } from "@mui/material";

export const themeOptions: ThemeOptions = {
  typography: {
    fontFamily: ["Yu Gothic", 'Roboto', "sans-serif"].join(','),
    fontSize: 14
  }
};

fontFamilyはカンマ区切りの文字列で指定しますが、可読性を上げるために配列をjoinしています。
fontSizeは、MUIの各コンポーネントで使用されるフォントサイズを計算するのに使用されます。defaultは14pxですが、日本語や中国語などはフォントが大きいため、小さ目の数値にすると可読性が増すとのことです。

コンポーネント

MUIで用意されているコンポーネントごとのスタイルを上書きすることができます。

Default Props

コンポーネントのデフォルト値を指定することもできます。例えば、TextFieldコンポーネントのvariantはデフォルトでOutlinedになっていますが、アプリケーション全体でStandardを使いたい指定したい場合、次のように指定できます。

import { ThemeOptions } from "@mui/material";

export const themeOptions: ThemeOptions = {
  components: {
    MuiTextField: {
      defaultProps: {
        variant: "standard"
      }
    }
  }
};

Style Overrides

コンポーネントのスタイルを上書きすることができます。

import { ThemeOptions } from "@mui/material";
import {cyan, green, orange, red} from "@mui/material/colors";

export const themeOptions: ThemeOptions = {
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: '2rem'
        }
      }
    }
  }
};

rootとなっている部分は、そのコンポーネントのスロットとなります。この部分はコンポーネントのDOMツリーによって異なっていて、例えばButtonであればアイコン表示時のサイズを指定できる iconSizeMediumがあったりします。
他にも、Menuであれば paperというスロットがあり、こちらはMenuコンポーネントに内包されるPaperのスタイルを定義することができます。

Buttonの場合は、次のようなスロットがあります。