Gatsby Theme Aoi で MUI テーマを設定する

MUI にはサイト全体に統一的なスタイルを施すためのテーマ機能があります。 この記事では Gatsby Theme Aoi で MUI テーマを編集する方法を説明します。前回と同じように Gatsby テーマの Shadowing という機能で実装します。

MUI テーマファイルを作成

Gatsby プロジェクトの src ディレクトリに、@cieloazul310/gatsby-theme-aoi-top-layout というディレクトリを作成し、theme.ts を作成します。Gatsby Theme Aoi のスターターを使っている場合は既にファイルが存在しているはずです。

mkdir src/@cieloazul310/gatsby-theme-aoi-top-layout
touch src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts

Gatsby プロジェクトは以下のような構成になります。

.
├── gatsby-config.js
├── package.json
└── src
    ├── @cieloazul310
    │   ├── gatsby-theme-aoi-layout
    │   │   └── menu.tsx
    │   └── gatsby-theme-aoi-top-layout
    │       └── theme.ts
    └── pages
        ├── 404.tsx
        ├── index.tsx
        └── page-2.tsx

MUI テーマファイルの中身

以下のファイルは実際にこのサイトで使われているテーマです。パレットの設定とフォントサイズの設定をしています。

responsiveFontSizes というヘルパー関数は、見出しに使われる文字サイズを画面の横幅に応じて自動で設定してくれます。このサイトでは、その他に typography.body1 と typography.body2 という本文で使われる文字サイズを、xs サイズ (横幅 600px 未満)のときに縮小しています。日本語のフォントは欧文フォントよりも大きく見えるため、小さい文字サイズが適当かもしれません。

const theme = createTheme({
  typography: {
    // In Chinese and Japanese the characters are usually larger,
    // so a smaller fontsize may be appropriate.
    fontSize: 12,
  },
});

https://mui.com/customization/typography/#font-size

embed:theme.ts

テーマの設定について詳しくは MUI 公式のドキュメントを参照ください。