Avatar API

想要学习更多组件属性和 CSS API，可以查阅 React Avatar 组件的 API 文档。

导入

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

The name MuiAvatar can be used when providing default props or style overrides in the theme.

原生（Native）组件的属性也是可用的。

名称	类型	默认值	描述
alt	string		Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element.
children	node		Used to render icon or text elements inside the Avatar if `src` is not set. This can be an element, or just a string.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
imgProps	object		Attributes applied to the `img` element if the component is used to display an image. It can be used to listen for the loading error event.
sizes	string		The `sizes` attribute for the `img` element.
src	string		The `src` attribute for the `img` element.
srcSet	string		The `srcSet` attribute for the `img` element. Use this attribute for responsive image display.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant	'circular' \| 'rounded' \| 'square' \| string	'circular'	The shape of the avatar.

ref 则会被传递到根元素中。

规则名称	全局类名	描述
root	.MuiAvatar-root	Styles applied to the root element.
colorDefault	.MuiAvatar-colorDefault	Styles applied to the root element if not `src` or `srcSet`.
circular	.MuiAvatar-circular	Styles applied to the root element if `variant="circular"`.
rounded	.MuiAvatar-rounded	Styles applied to the root element if `variant="rounded"`.
square	.MuiAvatar-square	Styles applied to the root element if `variant="square"`.
img	.MuiAvatar-img	Styles applied to the img element if either `src` or `srcSet` is defined.
fallback	.MuiAvatar-fallback	Styles applied to the fallback icon

您可以使用组件自定义选项对组件进行个性化：

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.