Zenn
🐡

Material UIでのレスポンシブサイト作成

2022/03/02に公開
Material-UI
tech

はじめに

今回はMaterial UIでのレスポンシブサイト作成方法をご紹介します。

Material UIにはいくつかレスポンシブにスタイリングする方法があるのでご紹介していこうと思います。

目次

  • media queryを使用する方法

  • useMediaQueryを使用する方法

  • themeのbreakpointsを設定し、使用する方法

  • theme.breakpointsを使用する方法 2(追記)

media queryを使用する方法

皆さんが普段CSS等を使用するうえで馴染みがあるかと思いますが、meadia queryをMaterial UIでも使用することが可能です。

<Box component="span" sx={{
    fontSize: "1rem",
    "@media screen and (min-width:600px)": {
        width: ".8rem",
    },
}} >
    dammy text
</Box>

普段利用する際との違いは「''」(シングルクォーツ)または「""」（ダブルクォーツ）で囲う必要がある点だけです。

馴染みがある分この書き方が一番書きやすいかもしれないですね。

useMediaQueryを使用する方法

続いてのuseMediaQueryはMaterial UI独自のものです。

React上で使用するためのもので、true or false で結果を返してくれます。
挙動としては、useStateのような挙動をイメージすると良いです。

import { useMediaQuery } from "@mui/material";
import Link from "next/link";

const navBar = () => {
    const matches: boolean = useMediaQuery("(min-width:577px)");
    {matches ? (
        <Box component="div">
            <Link href="/" passHref>
                <Button color="secondary">ボタン</Button>
            </Link>
        </Box>
    ) : (
        <Box></Box>
    )}

上記では画面横幅が577px以上でtrue、576px以下ではfalseとなるように設定しており、matchesがtrueの場合、falseの場合でボタンの出し分けを行っています。

また、Material UIのブレイクポイントを使用しても記載が出来ます。

const matches: boolean = useMediaQuery(() => theme.breakpoints.up("sm"));

ただ、これでスタイリングしようとした場合は2重、3重で要素を書くことになるため、見にくくなりますし、読み込みにもより時間がかかることになるので、特別な理由がない限りあまり使用すべきではないと思います。

useEffect等を使用して、アニメーションを付けたい場合には非常に有効です。

themeのbreakpointsを設定し、使用する方法

themeのbreakpointsを使用する方法では、以前紹介したMaterial UIのthemeを用いる方法です。

themeについては下記で紹介しておりますので、よければご参照ください。

https://zenn.dev/tns_00/articles/zenn-material-ui-basics#theme

Material UIではbreakPointsというものを設定して、レスポンシブにスタイリングする事が出来ます。

初期値

  • xs: 0
  • sm: 600
  • md: 900
  • lg: 1200
  • xl: 1536

下記のようにすることで好きな位置にbreakpointを打つことが出来ます。

import { createTheme } from "@mui/material/styles";

let theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 768,
      lg: 1025,
      xl: 1536,
    },
  },

実際にbreakPointsを利用する方法ですが、下記のようにsxプロパティ内で使用します。
今回は横幅が600px以上ではblock、599px以下ではnoneとして、表示非表示の出し分けを行っています。

      <Box
        component="div"
        sx={{
          display: { xs: "none", sm: "block" },
        }}
      >
        <Link href="/" passHref>
          <Button color="secondary">ボタン</Button>
        </Link>
      </Box>

Material UIを使用するうえではこの方法が一番見やすく感じますね。
複数で実装するという観点から見ても、統一ができ、ミスが発生しにくいように思います。

theme.breakpointsを使用する方法 2(追記)

他にもう1パターンレスポンシブ設定を出来る方法を見つけたので記載します。
themeを使用する方法で、breakpoints.upの他にdownやbetween等も使用できます。

      <Box
        component="div"
        sx={{
          theme.breakpoints.up["sm"] : {
            width: "500px",
          }
        }}
      >
        <Link href="/" passHref>
          <Button color="secondary">ボタン</Button>
        </Link>
      </Box>

まとめ

今回はMaterial UIでレスポンシブにスタイリングする方法をご紹介しました。

個人的には読みやすく、共通化もしやすそうという観点から
themeのbreakpointsを設定し、使用する方法 または、 theme.breakpointsを使用する方法 2(追記)
がMaterial UIを使用するうえではいいのではないかという結論に至りました。

Material UIにはまだまだ面白い要素があるので、またご紹介できたらと思います。

ここまで読んでくださり、ありがとうございました。

Discussion