MUI スタック: React で 1 次元レイアウトをマスターする-jsチュートリアル-php.cn

導入

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

MUI Stack: Mastering One-Dimensional Layouts in 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 Stack: Mastering One-Dimensional Layouts in React

この基盤により、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';

ログイン後にコピー

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

MUI Stack: Mastering One-Dimensional Layouts in React

もう 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: Mastering One-Dimensional Layouts in React

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

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 Stack: Mastering One-Dimensional Layouts in React

位置調整と位置合わせ

スタックアイテムを正確に配置するために、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 サイトの他の関連記事を参照してください。