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:
styleOverrides property in a custom theme.If you did not find the information in this page, consider having a look at the implementation of the component for more detail.