模态对话框API

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

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

阅读这篇关于最小化 bundle 大小的指南，了解两者之间的区别。

原生组件的属性也可用。

名称	类型	默认值	描述
children	node	-	组件的内容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	组件的颜色。它支持对此组件有意义的那些主题颜色。要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串或组件。
invertedColors	bool	false	如果为 `true`，则具有隐式 color 属性的 children 会反转其颜色以匹配组件的 variant 和 color。
layout	'center' \| 'fullscreen' \| string	'center'	对话框的布局
maxWidth	number \| string	-	组件的最大宽度。
minWidth	number \| string	-	组件的最小宽度。
orientation	'horizontal' \| 'vertical'	'vertical'	组件的方向。
size	'sm' \| 'md' \| 'lg' \| string	'md'	组件的尺寸。要了解如何向组件添加自定义尺寸，请查看主题组件—扩展尺寸。
slotProps	{ root?: func \| object }	{}	用于每个内部插槽的属性。
slots	{ root?: elementType }	{}	用于每个内部插槽的组件。有关更多详细信息，请参阅下面的 Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的全局 variant。要了解如何添加您自己的 variant，请查看主题组件—扩展 variant。

ref 被转发到根元素。

您可以使用 JoyModalDialog 通过主题更改此组件的默认属性。

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称	类名	默认组件	描述
root	.MuiModalDialog-root	`'div'`	渲染根元素的组件。

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

类名	规则名称	描述
.MuiModalDialog-colorContext	colorContext	当颜色反转被触发时，应用于根元素的类名。
.MuiModalDialog-colorDanger	colorDanger	如果 `color="danger"`，则应用于根元素的类名。
.MuiModalDialog-colorNeutral	colorNeutral	如果 `color="neutral"`，则应用于根元素的类名。
.MuiModalDialog-colorPrimary	colorPrimary	如果 `color="primary"`，则应用于根元素的类名。
.MuiModalDialog-colorSuccess	colorSuccess	如果 `color="success"`，则应用于根元素的类名。
.MuiModalDialog-colorWarning	colorWarning	如果 `color="warning"`，则应用于根元素的类名。
.MuiModalDialog-layoutCenter	layoutCenter	如果 `layout="center"`，则应用于根元素的类名。
.MuiModalDialog-layoutFullscreen	layoutFullscreen	如果 `layout="fullscreen"`，则应用于根元素的类名。
.MuiModalDialog-sizeLg	sizeLg	如果 `size="lg"`，则应用于根元素的类名。
.MuiModalDialog-sizeMd	sizeMd	如果 `size="md"`，则应用于根元素的类名。
.MuiModalDialog-sizeSm	sizeSm	如果 `size="sm"`，则应用于根元素的类名。
.MuiModalDialog-variantOutlined	variantOutlined	如果 `variant="outlined"`，则应用于根元素的类名。
.MuiModalDialog-variantPlain	variantPlain	如果 `variant="plain"`，则应用于根元素的类名。
.MuiModalDialog-variantSoft	variantSoft	如果 `variant="soft"`，则应用于根元素的类名。
.MuiModalDialog-variantSolid	variantSolid	如果 `variant="solid"`，则应用于根元素的类名。

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

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