MUIの全てのコンポーネントのfont-familyを変更したい時は、createThemeを使おう。
目次
createThemeとは
テーマに合わせてMUI をカスタマイズできます。色やタイポグラフィー、テーマ設定変数などなど、MUIを自作できます。
あわせて読みたい
Theming – Material UI
Customize Material UI with your theme. You can change the colors, the typography and much more.
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>
)
}
Summary
ThemeProviderを定義すると、MUIの全体設定を管理することができます。
便利ですね。
