头像API

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

演示

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

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

阅读这篇关于最小化 bundle 大小的指南，了解差异。

原生组件的属性也可用。

名称	类型	默认值	描述
alt	字符串	-	与 `src` 或 `srcSet` 结合使用，为渲染的 `img` 元素提供 alt 属性。
children	节点	-	如果未设置 `src`，用于在 Avatar 内部渲染图标或文本元素。这可以是元素，也可以只是字符串。
classes	对象	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。
imgProps	对象	-	属性应用于 `img` 元素的属性（如果组件用于显示图像）。它可用于监听加载错误事件。已弃用－请改用 `slotProps.img`。此属性将在 v7 中移除。有关更多详细信息，请参阅从已弃用的 API 迁移。
sizes	字符串	-	`img` 元素的 `sizes` 属性。
slotProps	{ img?: func \| object }	{}	用于每个插槽内部的属性。
slots	{ img?: elementType }	{}	用于每个插槽内部的组件。
src	字符串	-	`img` 元素的 `src` 属性。
srcSet	字符串	-	`img` 元素的 `srcSet` 属性。使用此属性进行响应式图像显示。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
variant	'circular' \| 'rounded' \| 'square' \| string	'circular'	头像的形状。

ref 被转发到根元素。

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

插槽名称	类名	默认组件	描述
img	.MuiAvatar-img	`折叠`	渲染过渡效果的组件。请参阅本指南以了解有关此组件要求的更多信息。

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

类名	规则名称	描述
.MuiAvatar-circular	circular	如果 `variant="circular"`，则应用于根元素的样式。
.MuiAvatar-colorDefault	colorDefault	如果不是 `src` 或 `srcSet`，则应用于根元素的样式。
.MuiAvatar-fallback	fallback	应用于回退图标的样式
.MuiAvatar-root	root	应用于根元素的样式。
.MuiAvatar-rounded	rounded	如果 `variant="rounded"`，则应用于根元素的样式。
.MuiAvatar-square	square	如果 `variant="square"`，则应用于根元素的样式。

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

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