跳到内容跳到内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

AlertAPI

React Alert 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

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

通过阅读有关最小化 bundle 大小的指南，了解它们之间的区别。

Props

Paper 组件的 props 也可用。

名称类型默认值描述
actionnode-

要显示的操作。它在消息之后、警报末尾呈现。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参见下方的CSS 类 API。

closeTextstring'关闭'

覆盖关闭弹出窗口图标按钮的默认标签。
出于本地化目的，您可以使用提供的翻译。

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

组件的颜色。除非提供，否则该值取自 severity prop。它支持默认和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。

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

用于内部每个插槽的组件。

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

插槽组件的额外 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 }		{}

用于内部每个插槽的 props。

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

用于内部每个插槽的组件。

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

系统 prop，允许定义系统覆盖以及额外的 CSS 样式。

有关更多详细信息，请参见 `sx` 页面。

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

要使用的 variant。

ref 被转发到根元素。

继承

虽然上面没有明确文档说明，但 Paper 组件的 props 也可在 Alert 中使用。您可以利用这一点来定位嵌套组件。

主题默认 props

您可以使用 MuiAlert 通过主题更改此组件的默认 props。

插槽

插槽名称类名默认组件描述
root.MuiAlert-rootPaper渲染 root 插槽的组件。
icon.MuiAlert-icondiv渲染 icon 插槽的组件。
message.MuiAlert-messagediv渲染 message 插槽的组件。
action.MuiAlert-actiondiv渲染 action 插槽的组件。
closeButtonIconButton渲染 close button 的组件。
closeIconsvg渲染 close icon 的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiAlert-colorErrorcolorError如果 color="error"，则应用于根元素的样式。
.MuiAlert-colorInfocolorInfo如果 color="info"，则应用于根元素的样式。
.MuiAlert-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的样式。
.MuiAlert-colorWarningcolorWarning如果 color="warning"，则应用于根元素的样式。
.MuiAlert-filledfilled如果 variant="filled"，则应用于根元素的样式。
.MuiAlert-filledErrorfilledError如果 variant="filled" 且 color="error"，则应用于根元素的样式。
.MuiAlert-filledInfofilledInfo如果 variant="filled" 且 color="info"，则应用于根元素的样式。
.MuiAlert-filledSuccessfilledSuccess如果 variant="filled" 且 color="success"，则应用于根元素的样式。
.MuiAlert-filledWarningfilledWarning如果 variant="filled" 且 color="warning"，则应用于根元素的样式。
.MuiAlert-outlinedoutlined如果 variant="outlined"，则应用于根元素的样式。
.MuiAlert-outlinedErroroutlinedError如果 variant="outlined" 且 color="error"，则应用于根元素的样式。
.MuiAlert-outlinedInfooutlinedInfo如果 variant="outlined" 且 color="info"，则应用于根元素的样式。
.MuiAlert-outlinedSuccessoutlinedSuccess如果 variant="outlined" 且 color="success"，则应用于根元素的样式。
.MuiAlert-outlinedWarningoutlinedWarning如果 variant="outlined" 且 color="warning"，则应用于根元素的样式。
.MuiAlert-standardstandard如果 variant="standard"，则应用于根元素的样式。
.MuiAlert-standardErrorstandardError如果 variant="standard" 且 color="error"，则应用于根元素的样式。
.MuiAlert-standardInfostandardInfo如果 variant="standard" 且 color="info"，则应用于根元素的样式。
.MuiAlert-standardSuccessstandardSuccess如果 variant="standard" 且 color="success"，则应用于根元素的样式。
.MuiAlert-standardWarningstandardWarning如果 variant="standard" 且 color="warning"，则应用于根元素的样式。

您可以使用以下自定义选项之一来覆盖组件的样式

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。