Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
);
}
```
## 示例依赖边界
`react`, `@mui/material/Box`, `@mui/material/Button`, `@mui/material/Typography`, `@mui/material/Modal`, `@mui/material/Backdrop`, `@mui/material/Fade`
直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。
## 固定上游 API 元数据参考
以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。
### Modal
```tsx
import Modal from '@mui/material/Modal';
import { Modal } from '@mui/material';
```
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 是 | `element` | — |
| `open` | 是 | `bool` | — |
| `classes` | 否 | `object` | — |
| `closeAfterTransition` | 否 | `bool` | `false` |
| `component` | 否 | `elementType` | — |
| `container` | 否 | `HTML element \| func` | — |
| `disableAutoFocus` | 否 | `bool` | `false` |
| `disableEnforceFocus` | 否 | `bool` | `false` |
| `disablePortal` | 否 | `bool` | `false` |
| `disableRestoreFocus` | 否 | `bool` | `false` |
| `disableScrollLock` | 否 | `bool` | `false` |
| `hideBackdrop` | 否 | `bool` | `false` |
| `keepMounted` | 否 | `bool` | `false` |
| `onClose` | 否 | `func` | — |
| `onTransitionEnter` | 否 | `func` | — |
| `onTransitionExited` | 否 | `func` | — |
| `slotProps` | 否 | `{ backdrop?: func \| object, root?: func \| object }` | `{}` |
| `slots` | 否 | `{ backdrop?: elementType, root?: elementType }` | `{}` |
| `sx` | 否 | `Array \| func \| object` | — |
## 原生源码声明
声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。
### vendor/src/Modal/Modal.d.ts
```ts
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverrideProps } from '@mui/types';
import { SlotComponentProps } from '../utils/types';
import { PortalProps } from '../Portal';
import { Theme } from '../styles';
import Backdrop from '../Backdrop';
import { OverridableComponent } from '../OverridableComponent';
import { ModalClasses } from './modalClasses';
export interface ModalComponentsPropsOverrides {}
export interface ModalOwnerState extends ModalProps {
exited: boolean;
}
export interface ModalSlots {
/**
* The component that renders the root.
* @default 'div'
*/
root?: React.ElementType | undefined;
/**
* The component that renders the backdrop.
*/
backdrop?: React.ElementType | undefined;
}
export interface ModalOwnProps {
/**
* A single child content element.
*/
children: React.ReactElement;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial | undefined;
/**
* @ignore
*/
className?: string | undefined;
/**
* When set to true the Modal waits until a nested Transition is completed before closing.
* @default false
*/
closeAfterTransition?: boolean | undefined;
/**
* An HTML element or function that returns one.
* The `container` will have the portal children appended to it.
*
* You can also provide a callback, which is called in a React layout effect.
* This lets you set the container from a ref, and also makes server-side rendering possible.
*
* By default, it uses the body of the top-level document object,
* so it's simply `document.body` most of the time.
*/
container?: PortalProps['container'] | undefined;
/**
* If `true`, the modal will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableAutoFocus?: boolean | undefined;
/**
* If `true`, the modal will not prevent focus from leaving the modal while open.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableEnforceFocus?: boolean | undefined;
/**
* The `children` will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal?: PortalProps['disablePortal'] | undefined;
/**
* If `true`, the modal will not restore focus to previously focused element once
* modal is hidden or unmounted.
* @default false
*/
disableRestoreFocus?: boolean | undefined;
/**
* Disable the scroll lock behavior.
* @default false
*/
disableScrollLock?: boolean | undefined;
/**
* If `true`, the backdrop is not rendered.
* @default false
*/
hideBackdrop?: boolean | undefined;
/**
* Always keep the children in the DOM.
* This prop can be useful in SEO situation or
* when you want to maximize the responsiveness of the Modal.
* @default false
*/
keepMounted?: boolean | undefined;
/**
* Callback fired when the component requests to be closed.
* The `reason` parameter can optionally be used to control the response to `onClose`.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose?:
| {
bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
}['bivarianceHack']
| undefined;
/**
* A function called when a transition enters.
*/
onTransitionEnter?: (() => void) | undefined;
/**
* A function called when a transition has exited.
*/
onTransitionExited?: (() => void) | undefined;
/**
* If `true`, the component is shown.
*/
open: boolean;
/**
* The components used for each slot inside the Modal.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots?: ModalSlots | undefined;
/**
* The props used for each slot inside the Modal.
* @default {}
*/
slotProps?:
| {
root?:
SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState> | undefined;
backdrop?:
| SlotComponentProps
| undefined;
}
| undefined;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps | undefined;
}
export interface ModalTypeMap<
RootComponent extends React.ElementType = 'div',
AdditionalProps = {},
> {
props: AdditionalProps & ModalOwnProps;
defaultComponent: RootComponent;
}
type ModalRootProps = NonNullable['root'];
export declare const ModalRoot: React.FC;
declare const Modal: OverridableComponent;
export type ModalProps<
RootComponent extends React.ElementType = ModalTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps, RootComponent> & {
component?: React.ElementType | undefined;
};
```
## 安装后验收
执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。
## 来源与许可
https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e
MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。
---
JGuang 全部资源索引: https://jiguang132.com/llms.txt