用法

了解使用 MUI Base 组件的基础知识。

响应式 meta 标签

MUI Base 是一个移动优先的组件库——我们首先为移动设备编写代码，然后根据需要在必要时使用 CSS 媒体查询来放大组件。

为了确保所有设备的正确渲染和触摸缩放，请将响应式视口 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' } }}>

最佳实践

如果您正在自定义像 Button 这样只有一个 root slot 的组件，您可能更喜欢使用更简洁的 `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 用法的详细信息，请参阅其相应的组件文档。