Avatar API

Documentação da API para o componente React Avatar . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

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

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

Props of the nativo component are also available.

Nome	Tipo	Padrão	Descrição
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		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
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	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.

O ref é encaminhado para o elemento raiz.

Nome da regra	Classe global	Descrição
root	.MuiAvatar-root	Estilos aplicados ao elemento raiz.
colorDefault	.MuiAvatar-colorDefault	Estilos aplicados para o elemento raiz se not `src` or `srcSet`.
circular	.MuiAvatar-circular	Estilos aplicados para o elemento raiz se `variant="circular"`.
rounded	.MuiAvatar-rounded	Estilos aplicados para o elemento raiz se `variant="rounded"`.
square	.MuiAvatar-square	Estilos aplicados para o elemento raiz se `variant="square"`.
img	.MuiAvatar-img	Estilos aplicados para the img element se either `src` or `srcSet` is defined.
fallback	.MuiAvatar-fallback	Styles applied to the fallback icon

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

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