Material UI v5 でのスマホサイズの判定方法

目次

MUI v5 でのスマホサイズの判定方法

Material-UI（MUI）は、ReactのUIフレームワークとして非常に人気があります。
最新バージョンのMUI v5では、名前空間やインポートの方法が変わっています。
この記事では、MUI v5を使用してスマホサイズの画面かどうかを判定する方法を紹介します。

必要なインポート

まず、必要なモジュールをインポートします。

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

スマホサイズの判定方法

次に、useTheme フックと useMediaQuery フックを使用して、スマホサイズの画面かどうかを判定します。

function MyComponent() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <div>
      {isMobile ? 'スマホサイズの表示' : 'スマホサイズではない表示'}
    </div>
  );
}

この方法は、テーマに設定されているブレークポイントを元にして動的にスマホサイズかどうかを判定するため、テーマのブレークポイントが変更されても自動的に適応されます。

まとめ

MUI v5では、新しい名前空間とインポート構造を利用して、シンプルかつ効果的にスマホサイズの画面かどうかを判定することができます。
この方法を利用することで、レスポンシブデザインを更に柔軟に実装することができます。