MUI Stack：掌握 React 中的一維佈局

介紹

建立無縫的一維佈局在 Web 開發中通常具有挑戰性，但 MUI Stack 使其變得簡單。 MUI 是一個強大的 React 元件庫，它提供 Stack 元件作為管理垂直和水平排列的有效工具，而無需深入研究 Flexbox 或自訂 CSS。本指南將幫助您了解 MUI Stack 從設定到實際使用的基本知識，以增強您在 React 中的佈局建立體驗。

MUI 堆疊入門

要開始使用 MUI Stack 建置佈局，請確保安裝了必要的 MUI 軟體包。 MUI 的 Stack 元件依賴三個主要套件：

• @mui/material：這是包含所有 MUI 元件的核心包，包括 Stack。
• @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 Stack 做好準備。 （包括終端安裝過程的螢幕截圖，以供快速視覺參考。）

MUI 堆疊的基本設置

安裝完軟體包後，您就可以將 Stack 合併到您的專案中了。讓我們完成初始設定：

導入和使用堆疊

首先，在 React 元件檔案中匯入 Stack 元件：

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

配置堆疊方向

方向屬性是 MUI Stack 的核心，可讓您輕鬆設定水平或垂直排列。預設情況下，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 就可以簡化您的版面建置體驗。請繼續關注我們深入探討配置、間距和響應式佈局。

配置間距和響應能力

有效的間距是創建具有視覺吸引力的佈局的關鍵，而 MUI Stack 可以輕鬆調整元素之間的間距。使用間距屬性，您可以定義子元素之間一致的間隙，可以是固定值，也可以回應螢幕尺寸。

間距

要設定固定間距，只需使用具有數值的間距屬性即可。例如，spacing={2} 將在所有子項之間添加統一的間隙：

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

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

在這裡，Stack 中的每個項目之間都有固定的間隙，從而創建均勻間隔、乾淨的佈局。

響應式間距

MUI Stack 還允許透過將物件傳遞給間距屬性來實現響應式間距。這可以根據螢幕尺寸斷點（例如，xs、sm、md）啟用不同的間距值：

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

在此範例中，間距在較小的螢幕上會更窄，在較大的螢幕上會更寬，自動調整以獲得最佳的可讀性。

另一個有用的功能是 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 提供了多個自訂選項，用於建立更複雜、更精美的佈局。讓我們探索如何使用分隔線和對齊設定來進一步優化佈局。

新增分隔線

divider 屬性可讓您在 Stack 項目之間插入視覺分隔符號。這對於清晰分隔清單、導覽功能表或按鈕組中的元素特別有用。

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

在此範例中，行佈局中的每個項目之間放置了一個垂直分隔線，從而增強了可讀性和結構。如果堆疊方向設定為列，您也可以將方向設定為水平。

理由和對齊

為了精確定位 Stack 項目，MUI Stack 支援 justifyContent 和alignItems 屬性，它們分別控制沿主軸和交叉軸的對齊方式：

• justifyContent：沿主軸對齊項目（如果方向=「行」則水平對齊；如果方向=「列」則垂直）。
• alignItems：沿交叉軸對齊項目（如果方向=「行」則垂直；如果方向=「列」則水平）。

範例：

# 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 Stack 支援系統屬性，它們是方便的樣式屬性，可讓您直接在元件上套用邊距、填充和其他與版面相關的 CSS。系統道具消除了對額外 CSS 檔案的需求，使您能夠管理元件內的樣式，保持程式碼組織有序且有效率。

例如，若要在 Stack 周圍新增內邊距或在 Stack 與其他元素之間新增邊距，您可以直接設定 p (padding) 或 m (margin) 屬性：

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

在此範例中，p={2} 在 Stack 周圍新增內部填充，而 m={3} 在 Stack 和頁面上的其他元素之間建立外部邊距。您可以使用這些速記系統道具進行各種調整，包括邊距 (m)、填充 (p)、寬度 (width) 和高度 (height)，無需額外的 CSS 程式碼即可提供重要的佈局控制。

七、結論

MUI Stack 是一個高度靈活且高效的元件，用於管理 React 中的一維佈局。透過簡化元素的對齊、間距和回應能力，Stack 減少了對自訂 CSS 的需求並加速了開發流程。

透過系統屬性控制佈局方向、間距和樣式的能力使 MUI Stack 成為任何重視乾淨且可維護程式碼的專案的強大補充。無論您是建立簡單的導覽列還是複雜的響應式佈局，MUI Stack 都提供了一種簡化的方式來建立 UI。

隨意探索其他 MUI 文檔，以解鎖更多自訂選項，例如高級系統道具、響應式設計增強功能以及將 Stack 與其他 MUI 元件整合以獲得全面的佈局解決方案。

以上是MUI Stack：掌握 React 中的一維佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！