头像组API

React AvatarGroup 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件的使用示例和详细信息，请访问组件演示页面

import AvatarGroup from '@mui/material/AvatarGroup';
// or
import { AvatarGroup } from '@mui/material';

阅读这份关于最小化 bundle 大小的指南，了解其中的区别。

原生组件的属性也可用。

名称	类型	默认值	描述
children	node	-	要堆叠的头像。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。
componentsProps	{ additionalAvatar?: object }	-	插槽组件的额外属性。您可以覆盖现有属性或添加新属性。此属性是 `slotProps` 属性的别名。已弃用－请改用 `slotProps` 属性。此属性将在 v7 版本中删除。有关更多详细信息，请参阅从已弃用的 API 迁移。
max	number	5	在显示 +x 之前显示的最大头像数。
renderSurplus	func	-	extraAvatars 的自定义渲染器签名:`function(surplus: number) => React.ReactNode` `surplus` 额外头像的数量返回: 要显示的自定义元素
slotProps	{ additionalAvatar?: object, surplus?: func \| object }	{}	用于内部每个插槽的属性。
slots	{ surplus?: elementType }	{}	用于内部每个插槽的组件。
spacing	'medium' \| 'small' \| number	'medium'	头像之间的间距。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
total	number	children.length	头像总数。用于计算额外头像的数量。
variant	'circular' \| 'rounded' \| 'square' \| string	'circular'	要使用的变体。

该组件无法持有 ref。

您可以使用 MuiAvatarGroup 通过主题更改此组件的默认属性。

插槽名称	类名	默认组件	描述
surplus

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们应用于组件的插槽。

类名	规则名称	描述
.MuiAvatarGroup-avatar	avatar	应用于头像元素的样式。
.MuiAvatarGroup-root	root	应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。