覆盖组件结构

了解如何覆盖 MUI Base 组件的默认 DOM 结构。

MUI Base 组件旨在适应最广泛的用例，但您有时可能需要更改组件结构在 DOM 中的渲染方式。

为了理解如何做到这一点，拥有组件的准确心智模型会有所帮助。

心智模型

组件的结构由填充该组件插槽的元素决定。插槽最常由 HTML 标签填充，但也可能由 React 组件填充。

所有组件都包含一个根插槽，用于定义它们在 DOM 树中的主要节点；更复杂的组件还包含额外的内部插槽，这些插槽以它们所代表的元素命名。

所有非实用程序 MUI Base 组件都接受 slots 属性，用于覆盖它们渲染的 HTML 结构。

此外，您可以使用 slotProps 将自定义属性传递给内部插槽。

根插槽代表组件的最外层元素。对于更简单的组件，根插槽通常由组件旨在替换的原生 HTML 元素填充。

例如，Button 的根插槽是一个 <button> 元素。此组件仅有一个根插槽；更复杂的组件可能具有额外的内部插槽。

复杂的组件由一个或多个内部插槽以及根插槽组成。这些插槽通常（但不一定）嵌套在根插槽内。

例如，Slider 由一个根 <span> 组成，该根 <span> 容纳多个内部插槽，这些插槽以它们所代表的元素命名：track、thumb、rail 等等。

使用 slots 属性替换组件插槽中的元素，包括根插槽。下面的示例展示了如何使用 <ol> 覆盖 Select 组件中的 listbox 插槽（默认为 <ul>）

slotProps 属性是一个对象，其中包含组件内所有插槽的属性。您可以使用它来定义要传递给组件内部插槽的其他自定义属性。

例如，下面的代码片段展示了如何向 Badge 组件的 badge 插槽添加自定义 CSS 类

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

放置在主组件上的所有其他属性也会传播到根插槽中（就像它们放置在 slotProps.root 中一样）。以下两个示例是等效的

<Badge id="badge1">

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

在覆盖更复杂组件的插槽时，请注意您渲染的 DOM 结构。如果您偏离默认结构太远（例如，通过无意中将块级元素嵌套在内联元素内部），您很容易破坏语义化和可访问 HTML 的规则。