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

AlertAPI

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

範例

Import

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

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

Props

Paper 元件的 props 也可在此使用。

名稱類型預設值描述
actionnode-

要顯示的動作。它會在訊息之後，在警示的結尾處呈現。

childrennode-

元件的內容。

classesobject-

覆寫或擴充套用至元件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

closeTextstring'Close'

覆寫關閉彈出視窗圖示按鈕的預設標籤。
為了本地化的目的，您可以使用提供的翻譯。

color'error'
| 'info'
| 'success'
| 'warning'
| string		-

元件的顏色。除非另有提供，否則該值取自 severity prop。它支援預設和自訂主題顏色，這些顏色可以按照調色盤自訂指南中所示的方式新增。

components{ CloseButton?: elementType, CloseIcon?: elementType }{}

用於每個 slot 內部的元件。

componentsProps{ closeButton?: object, closeIcon?: object }{}

slot 元件的額外 props。您可以覆寫現有的 props 或新增 props。

iconnode-

覆寫 children 之前顯示的圖示。除非另有提供，否則圖示會對應到 severity prop 的值。設定為 false 以移除 icon。

iconMapping{ error?: node, info?: node, success?: node, warning?: node }-

元件將 severity prop 對應到一系列不同的圖示，例如 success 對應到 <SuccessOutlined>。如果您希望變更此對應，您可以提供您自己的對應。或者，您可以使用 icon prop 來覆寫顯示的圖示。

onClosefunc-

當元件要求關閉時觸發的回呼。當提供此回呼且未設定 action prop 時，會顯示一個關閉圖示按鈕，點擊時會觸發回呼。

簽名：function(event: React.SyntheticEvent) => void
  • event 回呼的事件來源。
rolestring'alert'

元素的 ARIA role 屬性。

severity'error'
| 'info'
| 'success'
| 'warning'
| string		'success'

警示的嚴重程度。這定義了使用的顏色和圖示。

slotProps{ action?: func
| object, closeButton?: func
| object, closeIcon?: func
| object, icon?: func
| object, message?: func
| object, root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ action?: elementType, closeButton?: elementType, closeIcon?: elementType, icon?: elementType, message?: elementType, root?: elementType }{}

用於每個 slot 內部的元件。

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

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

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

variant'filled'
| 'outlined'
| 'standard'
| string		'standard'

要使用的 variant。

ref 會傳遞到 root 元素。

繼承

雖然上方未明確記錄，但 Paper 元件的 props 也可在 Alert 中使用。您可以利用這一點來目標巢狀元件。

主題預設 props

您可以使用 MuiAlert 來變更此元件的預設 props 使用主題。

Slots

Slot 名稱類別名稱預設元件描述
root.MuiAlert-rootPaper呈現 root slot 的元件。
icon.MuiAlert-icondiv呈現 icon slot 的元件。
message.MuiAlert-messagediv呈現 message slot 的元件。
action.MuiAlert-actiondiv呈現 action slot 的元件。
closeButtonIconButton呈現關閉按鈕的元件。
closeIconsvg呈現關閉圖示的元件。

CSS 類別

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

類別名稱規則名稱描述
.MuiAlert-colorErrorcolorError如果 color="error"，則套用至 root 元素的樣式。
.MuiAlert-colorInfocolorInfo如果 color="info"，則套用至 root 元素的樣式。
.MuiAlert-colorSuccesscolorSuccess如果 color="success"，則套用至 root 元素的樣式。
.MuiAlert-colorWarningcolorWarning如果 color="warning"，則套用至 root 元素的樣式。
.MuiAlert-filledfilled如果 variant="filled"，則套用至 root 元素的樣式。
.MuiAlert-filledErrorfilledError如果 variant="filled" 且 color="error"，則套用至 root 元素的樣式。
.MuiAlert-filledInfofilledInfo如果 variant="filled" 且 color="info"，則套用至 root 元素的樣式。
.MuiAlert-filledSuccessfilledSuccess如果 variant="filled" 且 color="success"，則套用至 root 元素的樣式。
.MuiAlert-filledWarningfilledWarning如果 variant="filled" 且 color="warning"，則套用至 root 元素的樣式。
.MuiAlert-outlinedoutlined如果 variant="outlined"，則套用至 root 元素的樣式。
.MuiAlert-outlinedErroroutlinedError如果 variant="outlined" 且 color="error"，則套用至 root 元素的樣式。
.MuiAlert-outlinedInfooutlinedInfo如果 variant="outlined" 且 color="info"，則套用至 root 元素的樣式。
.MuiAlert-outlinedSuccessoutlinedSuccess如果 variant="outlined" 且 color="success"，則套用至 root 元素的樣式。
.MuiAlert-outlinedWarningoutlinedWarning如果 variant="outlined" 且 color="warning"，則套用至 root 元素的樣式。
.MuiAlert-standardstandard如果 variant="standard"，則套用至 root 元素的樣式。
.MuiAlert-standardErrorstandardError如果 variant="standard" 且 color="error"，則套用至 root 元素的樣式。
.MuiAlert-standardInfostandardInfo如果 variant="standard" 且 color="info"，則套用至 root 元素的樣式。
.MuiAlert-standardSuccessstandardSuccess如果 variant="standard" 且 color="success"，則套用至 root 元素的樣式。
.MuiAlert-standardWarningstandardWarning如果 variant="standard" 且 color="warning"，則套用至 root 元素的樣式。

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

原始碼

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