0 Tk

dialog

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Dialogs are overlaid modal paper based components with a backdrop.

Props of the Modal component are also available.

Props

Name Type Default Description
open* bool - If true, the component is shown.
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.
aria-modal ‘false’ | ‘true’ | bool true Informs assistive technologies that the element is modal.
BackdropComponent elementType styled(Backdrop) 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.
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.
maxWidth ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | false | string ‘sm’ Determine the max-width of the dialog.
onBackdropClick func - Callback fired when the backdrop is clicked.
onClose func - Callback fired when the component requests to be closed.
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 and additional CSS styles.
TransitionComponent elementType Fade The component used for the transition.
transitionDuration number | { appear?: number, enter?: number, exit?: number } { enter, exit } The duration for the transition, in milliseconds.
TransitionProps object - Props applied to the transition element.

The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Modal component are also available in Dialog.

Theme Default Props

You can use MuiDialog to change the default props of this component with the theme.

CSS Classes

Class name Rule name Description
.MuiDialog-container container Styles applied to the container element.
.MuiDialog-paper paper Styles applied to the Paper component.
.MuiDialog-paperFullScreen paperFullScreen Styles applied if fullScreen={true}.
.MuiDialog-paperFullWidth paperFullWidth Styles applied if fullWidth={true}.
.MuiDialog-paperScrollBody paperScrollBody Styles applied if scroll="body".
.MuiDialog-paperScrollPaper paperScrollPaper Styles applied if scroll="paper".
(Other width and scroll-related classes)

You can override the style of the component using:

Source Code

View implementation