用法

學習使用 MUI Base 組件的基本知識。

響應式 meta 標籤

MUI Base 是一個行動裝置優先的組件庫——我們先為行動裝置編寫程式碼，然後在必要時使用 CSS 媒體查詢來放大組件。

為了確保所有裝置都能正確渲染和觸控縮放，請將響應式 viewport meta 標籤添加到您的 <head> 元素中

<meta name="viewport" content="initial-scale=1, width=device-width" />

共用 props

Base 組件是獨立支援的，並且在隔離狀態下完全可以運作。

每個組件都有其獨特的 API，但所有非工具組件都接受以下共用 props

slots

slots prop 是一個物件，可讓您覆寫基本組件本身的任何內部子組件——稱為 slots。

您可以使用 slots prop，透過自訂組件或 HTML 元素來覆寫預設 slots。

例如，MUI Base Badge 組件預設渲染一個 <span>。以下程式碼片段顯示如何透過將 <div> 指派給 root slot 來覆寫它

<Badge slots={{ root: 'div' }} />

slotProps

slotProps prop 是一個物件，其中包含組件內所有 slots 的 props。您可以使用它來為組件的內部元素定義額外的自訂 props。

例如，以下程式碼片段顯示如何將自訂 CSS 類別新增至 MUI Base Badge 組件的 badge slot

<Badge slotProps={{ badge: { className: 'my-badge' } }} />

放置在主要組件上的所有額外 props 也會傳播到 root slot 中（就像它們被放置在 slotProps.root 中一樣）。

這兩個範例是等效的

<Badge id="badge1">

<Badge slotProps={{ root: { id: 'badge1' } }}>

最佳實務

如果您正在自訂一個組件，例如只有 root slot 的 Button，您可能會更喜歡使用更簡潔的 component prop 而不是 slots。

使用 component 覆寫可讓您將該元素的屬性直接應用於 root。例如，如果您將 Button root 替換為 <li> 標籤，您可以將 <li> 屬性 value 直接新增至組件。如果您對 slots.root 執行相同的操作，則需要將此屬性放在 slotProps.root 物件上，以避免 TypeScript 錯誤。

組件 vs. hooks

MUI Base 包含兩種建構區塊：組件和 hooks。

許多 MUI Base 組件都是在 React hooks 的幫助下實作的。在建構自訂組件時，您可以使用組件或 hooks——或兩者的組合。

一般來說，我們建議您從組件開始建構，如果您發現自己受到可用自訂選項的限制太多，那麼請考慮重構您的組件以改用對應的 hook。

每個選項都有其自身的權衡取捨

組件

優點

通常需要較少的程式碼來實作
預設配備無障礙功能

缺點

對於渲染 HTML 的結構控制較少

Hooks

優點

完全控制渲染 HTML 結構

缺點

通常需要更多程式碼來實作
需要額外步驟才能使產生的組件具有無障礙功能

有關 hooks 用法的詳細資訊，請參閱其對應的組件文件。