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.