【React】Material UI(MUI)のBoxコンポーネントの使い方

ReactでMaterial UI（MUI）を使って開発していると、頻繁に登場するのがBox、Container、Paper、Stackといったラッパー系コンポーネントです。.

なかでも特に便利なのがBoxコンポーネント。ちょっとしたスタイルを付けたいときや、レイアウトを調整したいときに重宝します。

この記事では、Reactの『Material UI(MUI)のBoxコンポーネント』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

• Material UIのBoxコンポーネントとは？
• Material UIのBoxコンポーネントの使い方
• component属性でHTMLタグを変更する方法
• Boxコンポーネントの内部的な構造（どう描画されているのか？）

Material UIのBoxコンポーネントとは？

Boxコンポーネントは、Material UIが提供するスタイル可能な汎用コンテナです。

基本的にはHTMLの<div>のように使えますが、以下のような特徴があります。

• sx属性でスタイルを簡単に指定できる（CSS-in-JS）
• MUIのテーマ（spacing、paletteなど）と連携
• レスポンシブや擬似クラス（:hover等）にも対応
• component属性でHTMLタグを自由に切り替え可能

つまり、Boxコンポーネントはスタイルを柔軟に設定できる便利なdivと思ってOKです。

Material UIのBoxコンポーネントの使い方

Material UI(MUI)を利用するためには、Material UIとEmotionをReactプロジェクトにインストールする必要があります。プロジェクト配下で以下のコマンドを実行してインストールしましょう。

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

以下に、Material UIのBoxコンポーネントを使用したシンプルなサンプルコードを示しています。

import { Box } from '@mui/material';

function App() {
  return (
    <Box sx={{ p: 2, bgcolor: 'lightgray' }}>
      これはBoxの中身です
    </Box>
  );
}

export default App;

このコードでは、以下のようなスタイルが適用されます。

• p: 2：paddingがMUIのテーマに基づいて適用されます（theme.spacing(2)）
• bgcolor: 'lightgray'：背景色が設定されます

Boxコンポーネントは通常の<div>タグと同じように使えますが、sxプロップを使うことで柔軟かつ直感的にスタイルを設定できるのが最大の魅力です。

なお、上記のサンプルコードを<div>タグで書くと以下の様になります。

import { Box } from '@mui/material';

function App() {
  return (
    <div style={{ padding: '16px', backgroundColor: 'lightgray' }}>
      これはBoxの中身です
    </div>
  );
}

export default App;

MUIのspacing(1)は8pxに設定されているのがデフォルトです（theme.spacing(1) = 8px）。したがって、p: 2 は padding: 16px に相当します。

component属性でHTMLタグを変更する方法

Boxコンポーネントはデフォルトでは<div>として描画されますが、component属性を使うと他のHTMLタグにも変更可能です。

たとえば、セクション用の<section>タグにしたい場合は以下のように記述します。

<Box component="form">
<Box component="img" alt="" src=""/>
<Box component="span"/>
<Box component="a" href=""/>
<Box component="strong" href=""/>
<Box component="h1" href=""/>

他にもこんな例があります。

<Box component="form">...</Box>
<Box component="img" src="..." alt="画像" />
<Box component="a" href="#">リンク</Box>
<Box component="h1">見出し</Box>

Boxコンポーネントの内部的な構造（どう描画されているのか？）

Boxコンポーネントは、次のようなシンプルな<div>要素として描画されます。

<div class="MuiBox-root">
  <!-- ここに中身が入る -->
</div>

MUIが自動でMuiBox-rootというクラスを付けてくれます。スタイルはテーマやsxプロップを通して適用されます。

本記事のまとめ

この記事では、Reactの『Material UI(MUI)のBoxコンポーネント』について、以下の内容を説明しました。

• Material UIのBoxコンポーネントとは？
• Material UIのBoxコンポーネントの使い方
• component属性でHTMLタグを変更する方法
• Boxコンポーネントの内部的な構造（どう描画されているのか？）

お読み頂きありがとうございました。