よくある質問とトラブルシューティング

MUI（Material-UI）を使用していると、初心者でも経験者でも共通して直面しやすいエラーや問題がいくつか存在します。この章では、よく発生するエラーとその解決方法、ドキュメントでは見つけにくい設定のヒント、さらにはコミュニティリソースやサポートについて詳しく解説します。

Material-UIと@mui/materialのバージョン不整合

Module not found: Can't resolve '@material-ui/core/Button'

MUIはv5で大幅な変更が加えられ、以前の@material-ui/coreから@mui/materialにパッケージが変更されました。このため、v4のコードをそのまま使うと、エラーが発生します。解決するには、@mui/materialに関連するすべての依存関係を最新のバージョンに更新し、インポートパスを修正します。

npm install @mui/material @emotion/react @emotion/styled

インポートを以下のように修正します。

import { Button } from '@mui/material';  // 正しいインポート方法

カスタムテーマが適用されない

カスタムテーマを設定したのに、意図したスタイルが反映されない場合があります。これは、ThemeProviderが正しく使用されていない、もしくはCssBaselineが設定されていないことが原因です。

カスタムテーマを使用する際には、必ずThemeProviderをルートコンポーネントに適用し、CssBaselineを追加して基本のスタイルリセットを行います。

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

const customTheme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      {/* アプリケーション全体のコンポーネント */}
    </ThemeProvider>
  );
}

sxプロップが適用されない

sxプロップを使ったスタイリングが反映されない場合、@mui/systemがインストールされていない可能性があります。

sxプロップを使用するためには、@mui/systemの依存関係をインストールする必要があります。

npm install @mui/system

その後、以下のように使用します。

<Box sx={{ bgcolor: 'primary.main', padding: 2 }}>スタイル適用済みBox</Box>

emotionに関連するスタイルエラー

Cannot find module '@emotion/react'というエラーが発生することがあります。MUIではv5からemotionライブラリがデフォルトで使用されるため、依存関係が不足しているとエラーが発生します。

emotionに関連するパッケージをインストールします。

npm install @emotion/react @emotion/styled

その後、通常通りMUIコンポーネントを使用します。

ドキュメントでは見つけにくい設定のヒント

コンポーネントのツリーシェイキング

MUIでは、不要なコンポーネントがバンドルに含まれないようにする「ツリーシェイキング」をサポートしています。これを有効にするには、必ず個別のコンポーネントをインポートするようにしましょう。

// 悪い例: すべてのコンポーネントがインポートされる
import * as MaterialUI from '@mui/material';

// 良い例: 必要なコンポーネントのみインポートする
import { Button, TextField } from '@mui/material';

sxプロップでテーマに依存したスタイリングを行う

sxプロップを使うと、MUIのテーマに基づいたスタイリングを簡単に行えます。たとえば、テーマの間隔（spacing）やカラーパレットを参照することができます。

<Box
  sx={{
    bgcolor: 'primary.main',  // テーマのprimaryカラーを使用
    padding: (theme) => theme.spacing(2),  // テーマのspacing関数を使用
  }}
>
  カスタムスタイルのBox
</Box>

これにより、テーマに基づいた一貫性のあるスタイリングが簡単に実現できます。

Drawerのブレークポイントに応じたレスポンシブ制御

Drawerコンポーネントは、レスポンシブデザインに適したナビゲーションの実装に使えます。variantをtemporaryまたはpersistentに設定し、ブレークポイントごとに挙動を切り替えることが可能です。

<Drawer
  variant={isMobile ? 'temporary' : 'permanent'}
  open={open}
  onClose={toggleDrawer}
>
  {/* Drawerの内容 */}
</Drawer>