覆寫元件結構

了解如何覆寫 MUI Base 元件的預設 DOM 結構。

MUI Base 元件旨在適用於最廣泛的使用情境，但您有時可能需要變更元件結構在 DOM 中的呈現方式。

為了理解如何做到這一點，擁有元件的準確心智模型會有所幫助。

心智模型

元件的結構由填充該元件「插槽 (slots)」的元素決定。插槽最常由 HTML 標籤填充，但也可能由 React 元件填充。

所有元件都包含一個「根插槽 (root slot)」，用於定義它們在 DOM 樹中的主要節點；更複雜的元件也包含額外的「內部插槽 (interior slots)」，以它們所代表的元素命名。

所有非工具型 MUI Base 元件都接受 slots 屬性，用於覆寫它們的渲染 HTML 結構。

此外，您可以使用 slotProps 將自訂屬性傳遞給「內部插槽 (interior slots)」。

「根插槽 (root slot)」代表元件的最外層元素。對於較簡單的元件，「根插槽 (root slot)」通常由元件旨在替換的原生 HTML 元素填充。

例如，「Button」的「根插槽 (root slot)」是一個 <button> 元素。此元件僅有一個「根插槽 (root slot)」；更複雜的元件可能有額外的「內部插槽 (interior slots)」。

複雜的元件由一個或多個「內部插槽 (interior slots)」以及「根插槽 (root slot)」組成。這些插槽通常（但不一定）巢狀於「根插槽 (root slot)」內。

例如，「Slider」由一個「根插槽 (root slot)」 <span> 組成，其中包含多個以它們所代表的元素命名的「內部插槽 (interior slots)」：track、thumb、rail 等等。

使用 slots 屬性來替換元件插槽中的元素，包括根插槽。「以下範例」展示如何使用 <ol> 覆寫「Select」元件中的 listbox 插槽（預設為 <ul>）。

slotProps 屬性是一個物件，其中包含元件內所有插槽的屬性。您可以使用它來定義要傳遞給元件「內部插槽 (interior slots)」的其他自訂屬性。

例如，以下程式碼片段展示如何將自訂 CSS 類別新增至「Badge」元件的 badge 插槽

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

放置在主要元件上的所有額外屬性也會傳播到「根插槽 (root slot)」中（就像它們被放置在 slotProps.root 中一樣）。這兩個範例是等效的

<Badge id="badge1">

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

在覆寫更複雜元件的插槽時，請注意您渲染的 DOM 結構。如果您過於偏離預設結構，您可能會輕易地破壞語意化和可訪問 HTML 的規則——例如，無意中將區塊層級元素巢狀於行內元素內。