);
}
```
## 示例依赖边界
`react`, `@mui/material/Box`, `@mui/material/Switch`, `@mui/material/Paper`, `@mui/material/Collapse`, `@mui/material/FormControlLabel`, `@mui/material/Fade`, `@mui/material/Grow`, `@mui/material/Slide`, `@mui/material/Zoom`
直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。
## 固定上游 API 元数据参考
以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。
### Collapse
```tsx
import Collapse from '@mui/material/Collapse';
import { Collapse } from '@mui/material';
```
原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `addEndListener` | 否 | `func` | — |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `collapsedSize` | 否 | `number \| string` | `'0px'` |
| `component` | 否 | `element type` | — |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | — |
| `in` | 否 | `bool` | — |
| `orientation` | 否 | `'horizontal' \| 'vertical'` | `'vertical'` |
| `slotProps` | 否 | `{ root?: func \| object, wrapper?: func \| object, wrapperInner?: func \| object }` | `{}` |
| `slots` | 否 | `{ root?: elementType, wrapper?: elementType, wrapperInner?: elementType }` | `{}` |
| `sx` | 否 | `Array \| func \| object` | — |
| `timeout` | 否 | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `duration.standard` |
### Fade
```tsx
import Fade from '@mui/material/Fade';
import { Fade } from '@mui/material';
```
原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 是 | `element` | — |
| `addEndListener` | 否 | `func` | — |
| `appear` | 否 | `bool` | `true` |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | — |
| `in` | 否 | `bool` | — |
| `timeout` | 否 | `number \| { appear?: number, enter?: number, exit?: number }` | `{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }` |
### Grow
```tsx
import Grow from '@mui/material/Grow';
import { Grow } from '@mui/material';
```
原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 是 | `element` | — |
| `addEndListener` | 否 | `func` | — |
| `appear` | 否 | `bool` | `true` |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | — |
| `in` | 否 | `bool` | — |
| `timeout` | 否 | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `'auto'` |
### Slide
```tsx
import Slide from '@mui/material/Slide';
import { Slide } from '@mui/material';
```
原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 是 | `element` | — |
| `addEndListener` | 否 | `func` | — |
| `appear` | 否 | `bool` | `true` |
| `container` | 否 | `HTML element \| func` | — |
| `direction` | 否 | `'down' \| 'left' \| 'right' \| 'up'` | `'down'` |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | `{ enter: theme.transitions.easing.easeOut, exit: theme.transitions.easing.sharp, }` |
| `in` | 否 | `bool` | — |
| `timeout` | 否 | `number \| { appear?: number, enter?: number, exit?: number }` | `{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }` |
### Zoom
```tsx
import Zoom from '@mui/material/Zoom';
import { Zoom } from '@mui/material';
```
原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。
| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 是 | `element` | — |
| `addEndListener` | 否 | `func` | — |
| `appear` | 否 | `bool` | `true` |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | — |
| `in` | 否 | `bool` | — |
| `timeout` | 否 | `number \| { appear?: number, enter?: number, exit?: number }` | `{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }` |
## 原生源码声明
声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。
### vendor/src/Collapse/Collapse.d.ts
```ts
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '../styles';
import { InternalStandardProps as StandardProps } from '../internal';
import { TransitionProps, TransitionStatus } from '../transitions/types';
import { CollapseClasses } from './collapseClasses';
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
export interface CollapseSlots {
/**
* The component that renders the root.
* @default 'div'
*/
root?: React.ElementType | undefined;
/**
* The component that renders the wrapper.
* @default 'div'
*/
wrapper?: React.ElementType | undefined;
/**
* The component that renders the inner wrapper.
* @default 'div'
*/
wrapperInner?: React.ElementType | undefined;
}
export interface CollapseRootSlotPropsOverrides {}
export interface CollapseWrapperSlotPropsOverrides {}
export interface CollapseWrapperInnerSlotPropsOverrides {}
export type CollapseSlotsAndSlotProps = CreateSlotsAndSlotProps<
CollapseSlots,
{
root: SlotProps<'div', CollapseRootSlotPropsOverrides, CollapseOwnerState>;
wrapper: SlotProps<'div', CollapseWrapperSlotPropsOverrides, CollapseOwnerState>;
wrapperInner: SlotProps<'div', CollapseWrapperInnerSlotPropsOverrides, CollapseOwnerState>;
}
>;
export interface CollapseProps
extends StandardProps, CollapseSlotsAndSlotProps {
/**
* Add a custom transition end trigger.
* Use it when you need custom logic to decide when the transition has ended.
* Note: Timeouts are still used as a fallback if provided.
*
* @param {HTMLElement} node The transitioning DOM node.
* @param {Function} done Call this when the transition has finished.
*/
addEndListener?: TransitionProps['addEndListener'] | undefined;
/**
* The content node to be collapsed.
*/
children?: React.ReactNode;
className?: string | undefined;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial | undefined;
/**
* The width (horizontal) or height (vertical) of the container when collapsed.
* @default '0px'
*/
collapsedSize?: string | number | undefined;
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType | undefined;
/**
* If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
* @default false
*/
disablePrefersReducedMotion?: boolean | undefined;
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing?: TransitionProps['easing'] | undefined;
/**
* If `true`, the component will transition in.
*/
in?: boolean | undefined;
/**
* The transition orientation.
* @default 'vertical'
*/
orientation?: 'horizontal' | 'vertical' | undefined;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*
* Set to 'auto' to automatically calculate transition time based on height.
* @default duration.standard
*/
timeout?: TransitionProps['timeout'] | 'auto' | undefined;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps | undefined;
}
export interface CollapseOwnerState extends CollapseProps {
state: TransitionStatus;
}
export default function Collapse(props: CollapseProps): React.JSX.Element;
```
### vendor/src/Fade/Fade.d.ts
```ts
import * as React from 'react';
import { TransitionProps } from '../transitions/types';
export interface FadeProps extends Omit {
/**
* Add a custom transition end trigger.
* Use it when you need custom logic to decide when the transition has ended.
* Note: Timeouts are still used as a fallback if provided.
*
* @param {HTMLElement} node The transitioning DOM node.
* @param {Function} done Call this when the transition has finished.
*/
addEndListener?: TransitionProps['addEndListener'] | undefined;
/**
* Perform the enter transition when it first mounts if `in` is also `true`.
* Set this to `false` to disable this behavior.
* @default true
*/
appear?: boolean | undefined;
/**
* A single child content element.
*/
children: React.ReactElement;
/**
* If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
* @default false
*/
disablePrefersReducedMotion?: boolean | undefined;
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing?: TransitionProps['easing'] | undefined;
/**
* If `true`, the component will transition in.
*/
in?: boolean | undefined;
ref?: React.Ref | undefined;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: theme.transitions.duration.enteringScreen,
* exit: theme.transitions.duration.leavingScreen,
* }
*/
timeout?: TransitionProps['timeout'] | undefined;
}
export default function Fade(props: FadeProps): React.JSX.Element;
```
### vendor/src/Grow/Grow.d.ts
```ts
import * as React from 'react';
import { TransitionProps } from '../transitions/types';
export interface GrowProps extends Omit {
/**
* Add a custom transition end trigger.
* Use it when you need custom logic to decide when the transition has ended.
* Note: Timeouts are still used as a fallback if provided.
*
* @param {HTMLElement} node The transitioning DOM node.
* @param {Function} done Call this when the transition has finished.
*/
addEndListener?: TransitionProps['addEndListener'] | undefined;
/**
* Perform the enter transition when it first mounts if `in` is also `true`.
* Set this to `false` to disable this behavior.
* @default true
*/
appear?: boolean | undefined;
/**
* A single child content element.
*/
children: React.ReactElement;
/**
* If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
* @default false
*/
disablePrefersReducedMotion?: boolean | undefined;
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing?: TransitionProps['easing'] | undefined;
/**
* If `true`, the component will transition in.
*/
in?: boolean | undefined;
ref?: React.Ref | undefined;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*
* Set to 'auto' to automatically calculate transition time based on height.
* @default 'auto'
*/
timeout?: TransitionProps['timeout'] | 'auto' | undefined;
}
export default function Grow(props: GrowProps): React.JSX.Element;
```
### vendor/src/Slide/Slide.d.ts
```ts
import * as React from 'react';
import { TransitionProps } from '../transitions/types';
export interface SlideProps extends TransitionProps {
/**
* Add a custom transition end trigger.
* Use it when you need custom logic to decide when the transition has ended.
* Note: Timeouts are still used as a fallback if provided.
*
* @param {HTMLElement} node The transitioning DOM node.
* @param {Function} done Call this when the transition has finished.
*/
addEndListener?: TransitionProps['addEndListener'] | undefined;
/**
* Perform the enter transition when it first mounts if `in` is also `true`.
* Set this to `false` to disable this behavior.
* @default true
*/
appear?: boolean | undefined;
/**
* A single child content element.
*/
children: React.ReactElement;
/**
* An HTML element, or a function that returns one.
* It's used to set the container the Slide is transitioning from.
*/
container?: null | Element | ((element: Element) => Element) | undefined;
/**
* If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
* @default false
*/
disablePrefersReducedMotion?: boolean | undefined;
/**
* Direction the child node will enter from.
* @default 'down'
*/
direction?: 'left' | 'right' | 'up' | 'down' | undefined;
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
* @default {
* enter: theme.transitions.easing.easeOut,
* exit: theme.transitions.easing.sharp,
* }
*/
easing?: TransitionProps['easing'] | undefined;
/**
* If `true`, the component will transition in.
*/
in?: TransitionProps['in'] | undefined;
ref?: React.Ref | undefined;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: theme.transitions.duration.enteringScreen,
* exit: theme.transitions.duration.leavingScreen,
* }
*/
timeout?: TransitionProps['timeout'] | undefined;
}
export default function Slide(props: SlideProps): React.JSX.Element;
```
### vendor/src/Zoom/Zoom.d.ts
```ts
import * as React from 'react';
import { TransitionProps } from '../transitions/types';
export interface ZoomProps extends TransitionProps {
/**
* Add a custom transition end trigger.
* Use it when you need custom logic to decide when the transition has ended.
* Note: Timeouts are still used as a fallback if provided.
*
* @param {HTMLElement} node The transitioning DOM node.
* @param {Function} done Call this when the transition has finished.
*/
addEndListener?: TransitionProps['addEndListener'] | undefined;
/**
* Perform the enter transition when it first mounts if `in` is also `true`.
* Set this to `false` to disable this behavior.
* @default true
*/
appear?: boolean | undefined;
/**
* A single child content element.
*/
children: React.ReactElement;
/**
* If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
* @default false
*/
disablePrefersReducedMotion?: boolean | undefined;
/**
* The transition timing function.
* You may specify a single easing or a object containing enter and exit values.
*/
easing?: TransitionProps['easing'] | undefined;
/**
* If `true`, the component will transition in.
*/
in?: boolean | undefined;
ref?: React.Ref | undefined;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: theme.transitions.duration.enteringScreen,
* exit: theme.transitions.duration.leavingScreen,
* }
*/
timeout?: TransitionProps['timeout'] | undefined;
}
export default function Zoom(props: ZoomProps): React.JSX.Element;
```
## 安装后验收
执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。
## 来源与许可
https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e
MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。
---
JGuang 全部资源索引: https://jiguang132.com/llms.txt