[MUI]全てのコンポーネントのfont-familyを変更する

MUIの全てのコンポーネントのfont-familyを変更したい時は、createThemeを使おう。

createThemeとは

テーマに合わせてMUI をカスタマイズできます。色やタイポグラフィー、テーマ設定変数などなど、MUIを自作できます。

MUIの全てのコンポーネントにfont-familyを設定する。

createThemeのtypographyプロパティに全てのコンポーネントで利用するfont-familyを指定します。
createThemeしたテーマをThemeProviderで定義するとfont-familyが設定されます。

import { createTheme, ThemeProvider } from '@mui/material/styles'

function MainApp(props: Props) {
  const { Component, pageProps, uniqueHistoryTagItems } = props

  const theme = createTheme({
    typography: {
      fontFamily: ['Yu Gothic', 'Roboto', 'sans-serif'].join(',')
    }
  })

  return (
    <ThemeProvider theme={theme}>
      <Component />
    </ThemeProvider>
  )
}