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, }) | 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 | Callback fired when the backdrop is clicked. | |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object, reason: string) => voidevent: 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属性的一部分。