跳到主要內容跳到主要內容
🚀 影響 Joy UI 2025 年的開發藍圖！參與最新的開發者問卷調查

AvatarAPI

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

範例

Import

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

閱讀這份關於最小化 bundle size 的指南，以了解差異。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
altstring-

與 src 或 srcSet 結合使用，為渲染的 img 元素提供 alt 屬性。

childrennode-

如果未設定 src，用於在 Avatar 內部渲染圖示或文字元素。這可以是元素，或僅僅是字串。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的主題顏色。

若要了解如何新增自己的顏色，請查看主題元件—擴展顏色。

componentelementType-

用於根節點的元件。可以是字串（用於 HTML 元素）或元件。

size'lg'
| 'md'
| 'sm'
| string		'md'

元件的尺寸。它接受 'sm' 和 'lg' 之間的主題值。

若要了解如何為元件新增自訂尺寸，請查看主題元件—擴展尺寸。

slotProps{ fallback?: func
| object, img?: func
| object, root?: func
| object }		{}

用於每個內部 slot 的 props。

slots{ fallback?: elementType, img?: elementType, root?: elementType }{}

用於每個內部 slot 的元件。

請參閱下方的Slots API以了解更多詳細資訊。

srcstring-

img 元素的 src 屬性。

srcSetstring-

img 元素的 srcSet 屬性。使用此屬性進行響應式圖片顯示。

sxArray<func
| object
| bool>
| func
| object		-

允許定義系統覆寫以及額外 CSS 樣式的系統 prop。

請參閱`sx` 頁面以了解更多詳細資訊。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'soft'

要使用的全域 variant。

若要了解如何新增自己的 variants，請查看主題元件—擴展 variants。

ref 會轉發到根元素。

主題預設 props

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

Slots

若要了解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱Class 名稱預設元件描述
root.MuiAvatar-root'div'渲染 root 的元件。
img.MuiAvatar-img'img'渲染 img 的元件。
fallback.MuiAvatar-fallback'svg'渲染 fallback 的元件。

CSS classes

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

Class 名稱規則名稱描述
.MuiAvatar-colorContextcolorContext當觸發顏色反轉時，應用於根元素的 Class 名稱。
.MuiAvatar-colorDangercolorDanger如果 color="danger"，則應用於根元素的 Class 名稱。
.MuiAvatar-colorNeutralcolorNeutral如果 color="neutral"，則應用於根元素的 Class 名稱。
.MuiAvatar-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的 Class 名稱。
.MuiAvatar-colorSuccesscolorSuccess如果 color="success"，則應用於根元素的 Class 名稱。
.MuiAvatar-colorWarningcolorWarning如果 color="warning"，則應用於根元素的 Class 名稱。
.MuiAvatar-sizeLgsizeLg如果 size="lg"，則應用於根元素的 Class 名稱。
.MuiAvatar-sizeMdsizeMd如果 size="md"，則應用於根元素的 Class 名稱。
.MuiAvatar-sizeSmsizeSm如果 size="sm"，則應用於根元素的 Class 名稱。
.MuiAvatar-variantOutlinedvariantOutlined如果 variant="outlined"，則應用於根元素的 Class 名稱。
.MuiAvatar-variantSoftvariantSoft如果 variant="soft"，則應用於根元素的 Class 名稱。
.MuiAvatar-variantSolidvariantSolid如果 variant="solid"，則應用於根元素的 Class 名稱。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始碼

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