Dialog API

想要学习更多组件属性和 CSS API，可以查阅 React Dialog 组件的 API 文档。

导入

import Dialog from '@mui/material/Dialog';
// 或
import { Dialog } from '@mui/material';

你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

Dialogs are overlaid modal paper based components with a backdrop.

组件名称

在主题中，名称“MuiDialog”可用于提供默认属性（props），或者样式覆盖

属性

Modal 组件的属性也是可用的。

名称	类型	默认值	描述
open^*	bool	false	Control the popup` open state.
aria-describedby	string		The id(s) of the element(s) that describe the dialog.
aria-labelledby	string		The id(s) of the element(s) that label the dialog.
BackdropComponent	elementType	styled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, })	已废弃 - Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version. A backdrop component. This prop enables custom backdrop rendering.
children	node		Dialog children, usually the included sub-components.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
disableEscapeKeyDown	bool	false	If `true`, hitting escape will not fire the `onClose` callback.
fullScreen	bool	false	If `true`, the dialog is full-screen.
fullWidth	bool	false	If `true`, the dialog stretches to `maxWidth`. Notice that the dialog width grow is limited by the default margin.
maxWidth	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false \| string	'sm'	Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`.
onBackdropClick	func		已废弃 - Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events. Callback fired when the backdrop is clicked.
onClose	func		Callback fired when the component requests to be closed. Signature: `function(event: object, reason: string) => void` event: The event source of the callback. reason: Can be: `"escapeKeyDown"`, `"backdropClick"`.
PaperComponent	elementType	Paper	The component used to render the body of the dialog.
PaperProps	object	{}	Props applied to the `Paper` element.
scroll	'body' \| 'paper'	'paper'	Determine the container for scrolling the dialog.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
TransitionComponent	elementType	Fade	The component used for the transition. Follow this guide to learn more about the requirements for this component.
transitionDuration	number \| { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
TransitionProps	object		Props applied to the transition element. By default, the element is based on this `Transition` component.

ref 则会被传递到根元素中。

继承

尽管上文没有明文记录， Modal 组件的属性(props) 在组件Dialog上同样是可用的。你可以利用这一点来指向嵌套组件

CSS

规则名称	全局类名	描述
root	.MuiDialog-root	Styles applied to the root element.
scrollPaper	.MuiDialog-scrollPaper	Styles applied to the container element if `scroll="paper"`.
scrollBody	.MuiDialog-scrollBody	Styles applied to the container element if `scroll="body"`.
container	.MuiDialog-container	Styles applied to the container element.
paper	.MuiDialog-paper	Styles applied to the Paper component.
paperScrollPaper	.MuiDialog-paperScrollPaper	Styles applied to the Paper component if `scroll="paper"`.
paperScrollBody	.MuiDialog-paperScrollBody	Styles applied to the Paper component if `scroll="body"`.
paperWidthFalse	.MuiDialog-paperWidthFalse	Styles applied to the Paper component if `maxWidth=false`.
paperWidthXs	.MuiDialog-paperWidthXs	Styles applied to the Paper component if `maxWidth="xs"`.
paperWidthSm	.MuiDialog-paperWidthSm	Styles applied to the Paper component if `maxWidth="sm"`.
paperWidthMd	.MuiDialog-paperWidthMd	Styles applied to the Paper component if `maxWidth="md"`.
paperWidthLg	.MuiDialog-paperWidthLg	Styles applied to the Paper component if `maxWidth="lg"`.
paperWidthXl	.MuiDialog-paperWidthXl	Styles applied to the Paper component if `maxWidth="xl"`.
paperFullWidth	.MuiDialog-paperFullWidth	Styles applied to the Paper component if `fullWidth={true}`.
paperFullScreen	.MuiDialog-paperFullScreen	Styles applied to the Paper component if `fullScreen={true}`.

您可以使用组件自定义选项对组件进行个性化：

具备全局类名.
在自定义主体中，设定一个规则名称作为组件的styleOverrides属性的一部分。

演示项目

Dialog