Pular para o conteúdo
Ajude a traduzir esta página

Dialog API

Documentação da API para o componente React Dialog . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Dialog from '@mui/material/Dialog';
// ou
import { Dialog } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Dialogs are overlaid modal paper based components with a backdrop.

Nome do componente

The name MuiDialog can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente Modal também estão disponíveis.

NomeTipoPadrãoDescrição
open*boolfalse
Control the popup` open state.
aria-describedbystring
The id(s) of the element(s) that describe the dialog.
aria-labelledbystring
The id(s) of the element(s) that label the dialog.
BackdropComponentelementTypestyled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, })
A backdrop component. This prop enables custom backdrop rendering.
childrennode
Dialog children, usually the included sub-components.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
disableEscapeKeyDownboolfalse
If true, hitting escape will not fire the onClose callback.
fullScreenboolfalse
If true, the dialog is full-screen.
fullWidthboolfalse
If true, the dialog stretches to maxWidth.
Notice that the dialog width grow is limited by the default margin.
maxWidth'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string		'sm'
Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.
onBackdropClickfunc
Callback fired when the backdrop is clicked.
onClosefunc
Callback fired when the component requests to be closed.

Signature:
function(event: object, reason: string) => void
event: The event source of the callback.
reason: Can be: "escapeKeyDown", "backdropClick".
PaperComponentelementTypePaper
The component used to render the body of the dialog.
PaperPropsobject{}
Props applied to the Paper element.
scroll'body'
| 'paper'		'paper'
Determine the container for scrolling the dialog.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
TransitionComponentelementTypeFade
The component used for the transition. Follow this guide to learn more about the requirements for this component.
transitionDurationnumber
| { appear?: number, enter?: number, exit?: number }		{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
TransitionPropsobject
Props applied to the transition element. By default, the element is based on this Transition component.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente Modal também estão disponíveis em Dialog. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiDialog-rootEstilos aplicados ao elemento raiz.
scrollPaper.MuiDialog-scrollPaperEstilos aplicados para the container element se scroll="paper".
scrollBody.MuiDialog-scrollBodyEstilos aplicados para the container element se scroll="body".
container.MuiDialog-containerEstilos aplicados a the container element.
paper.MuiDialog-paperEstilos aplicados a the Paper component.
paperScrollPaper.MuiDialog-paperScrollPaperEstilos aplicados para the Paper component se scroll="paper".
paperScrollBody.MuiDialog-paperScrollBodyEstilos aplicados para the Paper component se scroll="body".
paperWidthFalse.MuiDialog-paperWidthFalseEstilos aplicados para the Paper component se maxWidth=false.
paperWidthXs.MuiDialog-paperWidthXsEstilos aplicados para the Paper component se maxWidth="xs".
paperWidthSm.MuiDialog-paperWidthSmEstilos aplicados para the Paper component se maxWidth="sm".
paperWidthMd.MuiDialog-paperWidthMdEstilos aplicados para the Paper component se maxWidth="md".
paperWidthLg.MuiDialog-paperWidthLgEstilos aplicados para the Paper component se maxWidth="lg".
paperWidthXl.MuiDialog-paperWidthXlEstilos aplicados para the Paper component se maxWidth="xl".
paperFullWidth.MuiDialog-paperFullWidthEstilos aplicados para the Paper component se fullWidth={true}.
paperFullScreen.MuiDialog-paperFullScreenEstilos aplicados para the Paper component se fullScreen={true}.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações