記事内に広告が含まれています。

React MUI: CSS ユーティリティによるレスポンシブレイアウト（サンプルあり）

MUI では、CSS ユーティリティを提供しており、簡単にレスポンシブレイアウトを実現することができます。ここでは、flexbox を適用し、画面サイズによって flexDirection プロパティの値を切り替えて画面レイアウトを切り替える例を紹介します。

動作イメージ

画面幅によって背景色が切り替わり、Box 要素の並び方向が「横 → 縦」に変わることが分かります。

MUI CSS ユーティリティ

参考にした MUI のヘルプページはこちらです。

https://mui.com/system/basics/

実装方法

画面幅によって、適用されるプロパティが自動的に切り替わります。適用されるプロパティと、画面幅の対応は次の通りです。

  • xs - 極小: 0px ～
  • sm - 小: 600px ～
  • md - 中: 900px ～
  • lg - 大: 1200px ～
  • xl - 特大: 1536px ～

下記コードの、9-10 行目をご覧ください。

import { Box } from "@mui/material";
import React from "react";

function App() {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: { xs: "column", md: "row" }, // <-- 画面幅によって切り替える。
        alignItems: { xs: 'center', md: 'flex-start' }, // <-- 画面幅によって切り替える。
        color: "white",
        bgcolor: { xs: "darkred", md: "blue" },
      }}
    >
      <Box>item 1</Box>
      <Box>item 2</Box>
    </Box>
  );
}

export default App;

サンプルアプリケーション

mui-flexbox-demoダウンロード

-MUI, React