【Material UI】MUIのスタイルが反映されない問題の解決策

CodeDeblog運営者のTakayukiです。

今回は、MUIを利用していてアプリにCSSが反映されない方向けに、反映させる方法を解説します。

私も実際にこのブログやその他アプリを開発していてこの問題に頭を悩ませた経験があります。

カスタムCSSを反映させる方法

カスタムCSSを反映させるには、以下の手順を試してみると良いでしょう。

1. 「StyledEngineProvider」をインポートする
2. <StyledEngineProvider>タグで囲む
3. オプションとして「injectFirst」を付与する

僕は全体的にカスタムCSSを優先させることがほとんどなので、_app.tsxに追記します。

以下のように書くとカスタムCSSが適用されます。

import type { AppProps } from 'next/app';
import { StyledEngineProvider } from '@mui/material/styles';


export default function App({ Component, pageProps }: AppProps) {
  return (
      <StyledEngineProvider injectFirst>
        <Component {...pageProps} />
      </StyledEngineProvider>
  )
};

このブログを作成したときに、ローカルでは何もしなくても問題ないのに、デプロイ後にCSSが崩壊しました。

そのため、ローカルで開発したときに問題がなくても、デプロイする前に上記を行っておくと良いでしょう。