Dialog 对话框
对话框将一个任务告知给用户，它承载了一些需要用户进行确认的关键信息或者多个任务。
对话框是 modal 窗体的一种类型，它通常在应用程序内容之前呈现，来提供一些关键信息，或者要求用户做出决策。 对话框出现的时候会禁用应用程序的所有功能，只有被确认、被取消或已采取其他必要的操作时，对话框会从屏幕中消失。
对话框会带有目的性地打断工作流程，所以请您谨慎使用。
简单的对话框
简单对话框可以提供有关列表的额外信息与操作。 例如，它们可以显示头像，图标，纯文本或具体动作(例如添加帐户)。
触摸操作机制：
- 选中一个选项则会立刻触发提交选项，并关闭菜单的操作
- 在对话框外点击，或按下“返回”，将会取消操作并关闭对话框。
Selected: user02@gmail.com
<Typography variant="subtitle1">Selected: {selectedValue}</Typography>
<br />
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open simple dialog
</Button>
<SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />警告框
警告框是一种紧急中断的行为，用以通知用户，并需要确认。
大多数警报不需要标题。 删繁就简，总而言之：
- 问一个问题（例如：“是否删除此对话？”）
- 陈述一个和动作按钮相关的声明
请仅在高风险情况下使用标题栏警报，考虑到可能丢失连接。 用户应该能够单凭标题和按钮文本来理解所有的选项。
如果需要加上标题请:
- 使用明确的问题或声明，并在内容区域对其做出解释，例如：“是否要清除 USB 上的内容？”。
- 避免道歉、模棱两可或问一些问题，例如：“警告！” 或 “你确定吗?”
大小选择项
您可以使用 maxWidth的 enumerable 和 fullWidth的 boolean 来设定对话框的最大宽度。 当 fullWidth 属性为true时，对话框将根据 maxWidth 的值进行自我调整。
响应式全屏
您可以使用useMediaQuery来实现一个全屏显示的对话框。
import useMediaQuery from '@material-ui/core/useMediaQuery';
function MyComponent() {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
return <Dialog fullScreen={fullScreen} />
}确认对话框
确认型对话框明确要求用户在提交选项之前确认他们的选择。 比如说，用户可以听到多种铃声，但只有在点击 “OK” 后才意味着做出了选择。
在确认对话框中触摸 "取消"，或按后退，将会导致当前操作的取消，放弃任何更改， 并关闭对话框。
可拖动的对话框
您可以通过 react-draggable 来创建一个可拖动的对话框。 您可以将需要导入的 Draggable 组件作为 Dialog 组件的 PaperComponent 来传入。 这样一来，您就可以拖动整个对话框。
长内容滚动
考虑到用户有不同的视图大小，并且使用不同的设备，对话框会变得太长，这样的情况下，对话框是可滚动的。
- 使用
scroll=paper，对话框的内容能在 paper 元素中滚动。 - 使用
scroll=body，对话框的内容能在 body 元素中滚动。
请看一下下面的例子，这会帮助您加深理解：