🧸
MaterialUIで設定したThemeProviderが適用されない場合の解決策
動作確認環境
大幅に変更点があったMaterialUI v5を使用しています。
v4やその他のバージョンでは仕様が違う可能性があります。
バージョン
"react": "^17.0.2"
"@mui/material": "^5.5.0"
<ThemeProvider />に設置したテーマが適用されない
今回起こった事は、
- 全体的には適用されるが、特定のページだけ適用されない
- 一部タグ(今回は
<Typography />のみ)適用されない - 意図しないテーマのデザインになる
このような事が起こりました。
これ以外の場合にも解決になるかもしれません。
解決策
1. ブラウザキャッシュによりテーマが変更されない
ブラウザキャッシュによりデザインが変更されない事はプログラミングを勉強し始めてよくある事です。
ブラウザのキャッシュをクリアして再度確認してみてください。
chromeの場合
コマンドでキャッシュクリアが出来ます。
・ WidnwOS: [Shift] + [Ctrl] + [R]
・ macOS: [Shift] + [command] + [R]
2. <CssBaseline />の設置と設置場所のミス
MaterialUI には<CssBaseline />というリセット CSS のようなタグがあります。
これの設置を忘れている場合、または設置場所を間違えている場合にテーマが適用されないといった事が起こります。
ネットで調べているとindex.tsxに設置すると書いてある記事がありました。
しかし、ここに設置すると特定のタグに適用されないといった事が起こりました。
正しい設置位置
以下のように<ThemeProvider>のタグの直下に<CssBaseline />を設置する必要があります。
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
これが正しいか分かりませんが、現状正常に動いています。
Discussion