Dialog

Edit this page

Dialog

The API documentation of the Dialog React component.

Dialogs are overlaid modal paper based components with a backdrop.

Props

Name Type Default Description
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.
disableBackdropClick bool false If true, clicking the backdrop will not fire the onClose callback.
disableEscapeKeyDown bool false If true, hitting escape will not fire the onClose callback.
fullScreen bool false If true, the dialog will be full-screen
fullWidth bool false If true, the dialog stretches to maxWidth.
maxWidth enum: 'xs' |
 'sm' |
 'md' |
 false
 'sm' Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. 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) => void
event: The event source of the callback
onEnter func Callback fired before the dialog enters.
onEntered func Callback fired when the dialog has entered.
onEntering func Callback fired when the dialog is entering.
onEscapeKeyDown func Callback fired when the escape key is pressed, disableKeyboard is false and the modal is in focus.
onExit func Callback fired before the dialog exits.
onExited func Callback fired when the dialog has exited.
onExiting func Callback fired when the dialog is exiting.
open * bool If true, the Dialog is open.
PaperProps object Properties applied to the Paper element.
scroll enum: 'body' |
 'paper'
 'paper' Determine the container for scrolling the dialog.
TransitionComponent union: string |
 func |
 object
 Fade Transition component.
transitionDuration union: number |
 { enter?: number, exit?: number }
 { enter: duration.enteringScreen, exit: 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 Properties applied to the Transition element.

Any other properties supplied will be spread to the root element (Modal).

CSS API

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name Description
root Styles applied to the root element.
scrollPaper Styles applied to the root element if scroll="paper".
scrollBody Styles applied to the root element if scroll="bodyr".
paper Styles applied to the Paper component.
paperScrollPaper Styles applied to the Paper component if scroll="paper".
paperScrollBody Styles applied to the Paper component if scroll="body".
paperWidthXs Styles applied to the Paper component if maxWidth="xs".
paperWidthSm Styles applied to the Paper component if maxWidth="sm".
paperWidthMd Styles applied to the Paper component if maxWidth="md".
paperFullWidth Styles applied to the Paper component if fullWidth={true}.
paperFullScreen Styles applied to the Paper component if fullScreen={true}.

Have a look at overriding with classes section and the implementation of the component for more detail.

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiDialog.

Inheritance

The properties of the Modal component are also available. You can take advantage of this behavior to target nested components.

Demos