MUI スタック: React で 1 次元レイアウトをマスターする

導入

Web 開発ではシームレスな 1 次元レイアウトの作成が困難なことがよくありますが、MUI スタック を使用すると簡単になります。強力な React コンポーネント ライブラリである MUI は、Flexbox やカスタム CSS を深く掘り下げることなく、垂直方向と水平方向の配置を管理するための効率的なツールとして Stack コンポーネントを提供します。このガイドは、セットアップから実際の使用法まで MUI スタックの要点を理解し、React でのレイアウト構築エクスペリエンスを向上させるのに役立ちます。

MUI スタックの概要

MUI スタックを使用してレイアウトの構築を開始するには、必要な MUI パッケージがインストールされていることを確認しましょう。 MUI の Stack コンポーネントは 3 つの主要なパッケージに依存しています:

• @mui/material: これは、スタックを含むすべての MUI コンポーネントを含むコア パッケージです。
• @emotion/react および @emotion/styled: MUI はデフォルトでスタイリングに Emotion を使用し、これらのパッケージによりコンポーネント スタイルのシームレスなカスタマイズが可能になります。

インストール

ターミナルで次のコマンドを実行して、必要なパッケージをインストールします。

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

このステップでは、必要な依存関係をすべて備えた MUI スタックを実装する準備をします。 (簡単に視覚的に参照できるように、端末のインストール プロセスのスクリーンショットを含めます。)

MUI スタックの基本セットアップ

パッケージがインストールされたら、Stack をプロジェクトに組み込む準備が整いました。初期設定を見てみましょう:

スタックのインポートと使用

まず、React コンポーネント ファイルに Stack コンポーネントをインポートします。

import Stack from '@mui/material/Stack';

スタックの方向の構成

方向プロパティは MUI スタックの中心であり、水平または垂直の配置を簡単に設定できます。デフォルトでは、Stack は子を垂直列に配置します。これは要素を上から下に積み重ねるのに最適です。横型レイアウトの場合は、方向を「行」に切り替えます。

これが例です:

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

このコードでは、direction="row" によって項目が水平方向に並べて配置され、それぞれの間に間隔があけられます。この設定は、メニュー バー、項目リスト、または行形式で表示する要素を作成する場合に役立ちます。

この基盤により、MUI スタックはレイアウト構築エクスペリエンスを簡素化する準備ができています。構成、間隔、応答性の高いレイアウトについて詳しく説明していきますので、ご期待ください。

間隔と応答性の構成

視覚的に魅力的なレイアウトを作成するには、効果的な間隔が鍵となります。MUI スタックを使用すると、要素間の間隔を簡単に調整できます。 spacing プロパティを使用すると、固定値として、または画面サイズに応じて、子要素間の一貫したギャップを定義できます。

間隔

固定間隔を設定するには、数値を指定した spacing prop を使用するだけです。たとえば、spacing={2} は、すべての子の間に均一な間隔を追加します:

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

ここでは、スタック内の各アイテム間に固定ギャップがあり、均等な間隔のきれいなレイアウトが作成されます。

応答間隔

MUI スタックでは、オブジェクトを spacing prop に渡すことで、レスポンシブな間隔を設定することもできます。これにより、画面サイズのブレークポイント (xs、sm、md など) に基づいてさまざまな間隔値が有効になります。

import Stack from '@mui/material/Stack';

この例では、画面が小さい場合は間隔が狭くなり、画面が大きい場合は間隔が広くなり、読みやすさが最適になるように自動的に調整されます。

もう 1 つの便利な機能は、Stack の方向を応答的に調整する機能で、レイアウトをさまざまな画面サイズに適応させるのに役立ちます。異なるブレークポイントに異なる方向を指定するには、direction={{ xs: "column", sm: "row" }}:
を設定します。

import React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Typography variant="body1">First Item</Typography>
      <Typography variant="body1">Second Item</Typography>
      <Typography variant="body1">Third Item</Typography>
    </Stack>
  );
}

export default App;

この設定では、非常に小さな画面 (携帯電話など) では項目が列に配置され、小さな画面 (タブレットなど) 以降では行レイアウトに切り替わります。

強化されたレイアウトのカスタマイズ

MUI スタックには、より複雑で洗練されたレイアウトを構築するためのいくつかのカスタマイズ オプションが用意されています。仕切りと配置設定を使用してレイアウトをさらに調整する方法を見てみましょう。

区切り線の追加

ディバイダー プロップを使用すると、スタック アイテム間に視覚的なディバイダーを挿入できます。これは、リスト、ナビゲーション メニュー、またはボタンのグループ内の要素を明確に分離する場合に特に便利です。

<Stack direction="row" spacing={2}>
  <Typography variant="body1">Item 1</Typography>
  <Typography variant="body1">Item 2</Typography>
  <Typography variant="body1">Item 3</Typography>
</Stack>

この例では、行レイアウトの各項目の間に垂直区切り線が配置され、読みやすさと構造が強化されています。スタック方向が列に設定されている場合は、方向を水平に設定することもできます。

位置調整と位置合わせ

スタック アイテムを正確に配置するために、MUI スタックは justifyContent プロパティと alignItems プロパティをサポートしており、それぞれ主軸と交差軸に沿った配置を制御します。

• justifyContent: 主軸に沿って項目を配置します (direction="row" の場合は水平、direction="column" の場合は垂直)。
• alignItems: 項目を交差軸に沿って配置します (direction="row" の場合は垂直、direction="column" の場合は水平)。

例:

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

# Using Yarn
yarn add @mui/material @emotion/react @emotion/styled

この設定では、justifyContent="center" によって項目が主軸に沿って中央に配置され、alignItems="center" によって項目が交差軸に沿って中央に配置されるため、レイアウトがきれいに中央に配置されます。この柔軟性により、さまざまな画面サイズに適応し、視覚的な調和を維持するレイアウトを作成できます。

カスタム スタイリングのためのシステム プロップの使用

MUI スタックは、システム プロパティ をサポートします。これは、マージン、パディング、その他のレイアウト関連の CSS をコンポーネントに直接適用できる便利なスタイル プロパティです。システム プロパティを使用すると、追加の CSS ファイルが不要になり、コンポーネント内のスタイルを管理できるようになり、コードを整理して効率的に保つことができます。

たとえば、スタックの周囲にパディングを追加したり、スタックと他の要素の間にマージンを追加するには、p (パディング) または m (マージン) プロパティを直接設定できます。

import Stack from '@mui/material/Stack';

この例では、p={2} はスタックの周囲に内部パディングを追加し、m={3} はスタックとページ上の他の要素の間に外部マージンを作成します。これらの短縮システム プロパティを使用して、マージン (m)、パディング (p)、幅 (width)、高さ (height) などのさまざまな調整を行うことができ、追加の CSS コードを使用せずに大幅なレイアウト制御を実現できます。

7. 結論

MUI スタックは、React で 1 次元レイアウトを管理するための非常に柔軟で効率的なコンポーネントです。 Stack は要素の配置、間隔、応答性を簡素化することでカスタム CSS の必要性を減らし、開発プロセスを加速します。

システム プロパティを通じてレイアウトの方向、間隔、スタイルを制御できる機能により、MUI スタックは、クリーンで保守しやすいコードを重視するプロジェクトに強力に追加されます。シンプルなナビゲーション バーを構築する場合でも、複雑な応答性の高いレイアウトを構築する場合でも、MUI スタックは UI を構造化する合理的な方法を提供します。

追加の MUI ドキュメントを自由に参照して、高度なシステム プロップ、レスポンシブ デザインの強化、包括的なレイアウト ソリューションのためのスタックと他の MUI コンポーネントの統合など、さらに多くのカスタマイズ オプションを利用できるようにしてください。

以上がMUI スタック: React で 1 次元レイアウトをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。