AvatarAPI

React Avatar 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例展示

如需此 React 元件的使用範例和詳細資訊，請造訪元件展示頁面

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

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
alt	string	-	與 `src` 或 `srcSet` 結合使用，為渲染的 `img` 元素提供 alt 屬性。
children	node	-	如果未設定 `src`，則用於在 Avatar 內部渲染圖示或文字元素。這可以是元素，或僅僅是字串。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以瞭解更多詳細資訊。
component	elementType	-	用於根節點的元件。可以是字串（使用 HTML 元素）或元件。
imgProps	object	-	Attributes 套用至 `img` 元素（如果元件用於顯示圖片）。它可用於監聽載入錯誤事件。已過時－請改用 `slotProps.img`。此 prop 將在 v7 中移除。請參閱從已過時的 API 遷移以瞭解更多詳細資訊。
sizes	string	-	`img` 元素的 `sizes` 屬性。
slotProps	{ img?: func \| object }	{}	用於內部每個 slot 的 props。
slots	{ img?: elementType }	{}	用於內部每個 slot 的元件。
src	string	-	`img` 元素的 `src` 屬性。
srcSet	string	-	`img` 元素的 `srcSet` 屬性。使用此屬性進行響應式圖片顯示。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以瞭解更多詳細資訊。
variant	'circular' \| 'rounded' \| 'square' \| string	'circular'	avatar 的形狀。

ref 轉發到根元素。

您可以使用 MuiAvatar 透過主題變更此元件的預設 props。

Slot 名稱	類別名稱	預設元件	描述
img	.MuiAvatar-img	`Collapse`	渲染轉場效果的元件。請遵循本指南以瞭解關於此元件需求的更多資訊。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

類別名稱	規則名稱	描述
.MuiAvatar-circular	circular	如果 `variant="circular"`，則套用至根元素的樣式。
.MuiAvatar-colorDefault	colorDefault	如果沒有 `src` 或 `srcSet`，則套用至根元素的樣式。
.MuiAvatar-fallback	fallback	套用至 fallback 圖示的樣式
.MuiAvatar-root	root	套用至根元素的樣式。
.MuiAvatar-rounded	rounded	如果 `variant="rounded"`，則套用至根元素的樣式。
.MuiAvatar-square	square	如果 `variant="square"`，則套用至根元素的樣式。

您可以使用以下自訂選項之一覆寫元件的樣式

如果您在本頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。