0 Tk

modal

Import

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

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

Modal is a lower-level construct that is leveraged by the following components:

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal.

This component shares many concepts with react-overlays.

Props of the native component are also available.

Name Type Default Description
children* element - A single child content element.
open* bool - If true, the component is shown.
BackdropComponent elementType styled(Backdrop, …) A backdrop component. This prop enables custom backdrop rendering.
BackdropProps object - Props applied to the Backdrop element.
classes object - Override or extend the styles applied to the component. See CSS classes API below for more details.
closeAfterTransition bool false When set to true the Modal waits until a nested Transition is completed before closing.
component elementType - The component used for the root node. Either a string to use a HTML element or a component.
components { Backdrop?: elementType, Root?: elementType } {} The components used for each slot inside.
componentsProps { backdrop?: func | object, root?: func | object } {} The extra props for the slot components.
container HTML element | func - An HTML element or function that returns one. The container will have the portal children appended to it.
disableAutoFocus bool false If true, the modal will not automatically shift focus to itself when it opens.
disableEnforceFocus bool false If true, the modal will not prevent focus from leaving the modal while open.
disableEscapeKeyDown bool false If true, hitting escape will not fire the onClose callback.
disablePortal bool false The children will be under the DOM hierarchy of the parent component.
disableRestoreFocus bool false If true, the modal will not restore focus to previously focused element.
disableScrollLock bool false Disable the scroll lock behavior.
hideBackdrop bool false If true, the backdrop is not rendered.
keepMounted bool false Always keep the children in the DOM.
onBackdropClick func - Callback fired when the backdrop is clicked.
onClose func - Callback fired when the component requests to be closed.
onTransitionEnter func - A function called when a transition enters.
onTransitionExited func - A function called when a transition has exited.
slotProps { backdrop?: func | object, root?: func | object } {} The props used for each slot inside the Modal.
slots { backdrop?: elementType, root?: elementType } {} The components used for each slot inside the Modal.
sx Array<func | object | bool> | func | object - The system prop that allows defining system overrides as well as additional CSS styles.

The ref is forwarded to the root element.

Slot name Class name Default component Description
root .MuiModal-root 'div' The component that renders the root.
backdrop .MuiModal-backdrop - The component that renders the backdrop.

These class names are useful for styling with CSS. They are applied to the component’s slots when specific states are triggered.

Class name Rule name Description
.MuiModal-hidden hidden Class name applied to the root element if the Modal has exited.

You can override the style of the component using one of these customization options:

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.