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

警示API

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

示範

匯入

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

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

Props

原生組件的 props 也可用。

名稱類型預設描述
color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

組件的顏色。它支援適用於此組件的那些主題顏色。

若要了解如何新增您自己的顏色，請查看「主題組件—延伸顏色」。

componentelementType-

用於根節點的組件。可以是字串 (用於 HTML 元素) 或組件。

endDecoratornode-

放置在子元素之後的元素。

invertedColorsboolfalse

如果為 true，則具有隱含 color prop 的子元素會反轉其顏色，以符合組件的 variant 和 color。

rolestring'alert'

元素的 ARIA role 屬性。

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

組件的大小。

若要了解如何將自訂大小新增至組件，請查看「主題組件—延伸大小」。

slotProps{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }{}

用於每個 slot 內部的組件。

有關更多詳細資訊，請參閱下方的「Slots API」。

startDecoratornode-

放置在子元素之前的元素。

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

系統 prop，可讓您定義系統覆寫以及其他 CSS 樣式。

有關更多詳細資訊，請參閱 sx 頁面。

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

要使用的全域 variant。

若要了解如何新增您自己的 variant，請查看「主題組件—延伸 variant」。

ref 會轉發到根元素。

主題預設 props

您可以使用 JoyAlert 來變更此組件的預設 props (使用主題)。

Slots

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

Slot 名稱類別名稱預設組件描述
root.MuiAlert-root'div'呈現根的組件。
startDecoratorstartDecorator.MuiAlert-startDecorator'span'
endDecoratorendDecorator.MuiAlert-startDecorator呈現結束裝飾器的組件。

CSS 類別

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

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

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

原始碼

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