# 菜单 - 页面: https://jiguang132.com/zh/resources/material-ui/docs/menus - 资源: Material UI (https://jiguang132.com/zh/resources/material-ui.md) - 全部指南: https://jiguang132.com/zh/resources/material-ui/docs.md 通过原生菜单的键盘导航与选择提供临时操作。 本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。 ## 使用场景与业务边界 激活 MenuItem 不提供路由或保存；须提供锚点、打开状态和关闭策略。 ## 原生组成与范围 `Menu`, `MenuItem`, `MenuList`, `ClickAwayListener`, `Popover`, `Popper` 保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。 ## 原生安装与初始化 ```bash npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1 ``` 采用原生 npm 包与 Emotion，不提供虚构的 JGuang UI Registry 地址。将示例放在原生 ThemeProvider 内，按项目选择 CssBaseline 或 ScopedCssBaseline。先检查 React、现有 Provider、锁文件与 SSR 配置；不要覆盖用户文件或忽略 peer 冲突。本批实际验收 React 19.2.8；React 18 及以下须匹配 react-is。完整初始化规则见随附的双语 setup 文档。 ## 关键原生参数 仅解释本指南选出的关键参数，不是平铺的通用 API。原生继承来源、slot 结构、可空值与泛型仍按固定源码保留。 | 所属组件.属性 | 用途说明 | 声明来源 | | --- | --- | --- | | `Menu.open` | 受控原生可见性，不获取数据或执行操作。 | `Menu` | | `Menu.anchorEl` | 真实或受支持的虚拟锚点，保留所属类型与生命周期。 | `Menu` | | `Menu.onClose` | 原生关闭请求，reason／event 签名因组件不同，宿主须更新 open。 | `Menu` | | `MenuItem.selected` | 原生选中／按下展示，选中值由宿主管理。 | `MenuItem` | | `MenuItem.disabled` | 原生禁用交互状态，不是权限校验。 | `ButtonBase` | ## 可运行原生示例 下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。 - 基础菜单 · `BasicMenu` · 上游原生示例 - 图标菜单 · `IconMenu` · 上游原生示例 - 紧凑菜单 · `DenseMenu` · 上游原生示例 - 选中菜单项 · `SimpleListMenu` · 上游原生示例 - 复选与单选菜单项 · `CheckboxMenu` · 上游原生示例 - 复选与单选菜单项 · `RadioMenu` · 上游原生示例 - 菜单定位 · `PositionedMenu` · 上游原生示例 - 组合菜单列表 · `MenuListComposition` · 上游原生示例 - 账户菜单 · `AccountMenu` · 上游原生示例 - 定制样式 · `CustomizedMenus` · 上游原生示例 - 限制菜单高度 · `LongMenu` · 上游原生示例 - 限制说明 · `TypographyMenu` · 上游原生示例 - 更换过渡动画 · `FadeMenu` · 上游原生示例 - 上下文菜单 · `ContextMenu` · 上游原生示例 - 分组菜单 · `GroupedMenu` · 上游原生示例 ## 尚未支持的额外示例 这些条目仍保留在上游清单中，不静默跳过，也不展示为已完成预览。需要补充依赖／框架验收后再纳入可运行列表。 - 额外弹层状态库 · `MenuPopupState`: `material-ui-popup-state` ## 真实使用示例 固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。 ```tsx import * as React from 'react'; import Button from '@mui/material/Button'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; export default function BasicMenu() { const id = React.useId(); const buttonId = `${id}-button`; const menuId = `${id}-menu`; const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return (
Profile My account Logout
); } ``` ## 示例依赖边界 `react`, `@mui/material/Button`, `@mui/material/Menu`, `@mui/material/MenuItem`, `@mui/material/Divider`, `@mui/material/Paper`, `@mui/material/MenuList`, `@mui/material/ListItemText`, `@mui/material/ListItemIcon`, `@mui/material/Typography`, `@mui/icons-material/ContentCut`, `@mui/icons-material/ContentCopy`, `@mui/icons-material/ContentPaste`, `@mui/icons-material/Cloud`, `@mui/icons-material/Check`, `@mui/material/List`, `@mui/material/ListItemButton`, `@mui/icons-material/RadioButtonChecked`, `@mui/icons-material/RadioButtonUnchecked`, `@mui/material/ClickAwayListener`, `@mui/material/Grow`, `@mui/material/Popper`, `@mui/material/Stack`, `@mui/material/Box`, `@mui/material/Avatar`, `@mui/material/IconButton`, `@mui/material/Tooltip`, `@mui/icons-material/PersonAdd`, `@mui/icons-material/Settings`, `@mui/icons-material/Logout`, `@mui/material/styles`, `@mui/icons-material/Edit`, `@mui/icons-material/Archive`, `@mui/icons-material/FileCopy`, `@mui/icons-material/MoreHoriz`, `@mui/icons-material/KeyboardArrowDown`, `@mui/icons-material/MoreVert`, `@mui/icons-material/Drafts`, `@mui/icons-material/Send`, `@mui/icons-material/PriorityHigh`, `@mui/material/Fade`, `@mui/material/ListSubheader` 直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。 ## 固定上游 API 元数据参考 以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。 ### Menu ```tsx import Menu from '@mui/material/Menu'; import { Menu } from '@mui/material'; ``` 原生继承: `Popover`. 父级与 DOM 属性未被伪造为本组件新属性。 | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `open` | 是 | `bool` | — | | `anchorEl` | 否 | `HTML element \| func` | — | | `autoFocus` | 否 | `bool` | `true` | | `children` | 否 | `node` | — | | `classes` | 否 | `object` | — | | `disableAutoFocusItem` | 否 | `bool` | `false` | | `onClose` | 否 | `func` | — | | `PopoverClasses` | 否 | `object` | — | | `slotProps` | 否 | `{ backdrop?: func \| object, list?: func \| object, paper?: func \| object, root?: func \| object, transition?: func \| object }` | `{}` | | `slots` | 否 | `{ backdrop?: elementType, list?: elementType, paper?: elementType, root?: elementType, transition?: elementType }` | `{}` | | `sx` | 否 | `Array \| func \| object` | — | | `transitionDuration` | 否 | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `'auto'` | | `variant` | 否 | `'menu' \| 'selectedMenu'` | `'selectedMenu'` | ### MenuItem ```tsx import MenuItem from '@mui/material/MenuItem'; import { MenuItem } from '@mui/material'; ``` 原生继承: `ButtonBase`. 父级与 DOM 属性未被伪造为本组件新属性。 | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `autoFocus` | 否 | `bool` | `false` | | `children` | 否 | `node` | — | | `classes` | 否 | `object` | — | | `component` | 否 | `elementType` | — | | `dense` | 否 | `bool` | `false` | | `disableGutters` | 否 | `bool` | `false` | | `divider` | 否 | `bool` | `false` | | `focusVisibleClassName` | 否 | `string` | — | | `selected` | 否 | `bool` | `false` | | `sx` | 否 | `Array \| func \| object` | — | ### MenuList ```tsx import MenuList from '@mui/material/MenuList'; import { MenuList } from '@mui/material'; ``` 原生继承: `List`. 父级与 DOM 属性未被伪造为本组件新属性。 | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `autoFocus` | 否 | `bool` | `false` | | `autoFocusItem` | 否 | `bool` | `false` | | `children` | 否 | `node` | — | | `disabledItemsFocusable` | 否 | `bool` | `false` | | `disableListWrap` | 否 | `bool` | `false` | | `variant` | 否 | `'menu' \| 'selectedMenu'` | `'selectedMenu'` | ### ClickAwayListener ```tsx import ClickAwayListener from '@mui/material/ClickAwayListener'; import { ClickAwayListener } from '@mui/material'; ``` | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `children` | 是 | `element` | — | | `onClickAway` | 是 | `func` | — | | `disableReactTree` | 否 | `bool` | `false` | | `mouseEvent` | 否 | `'onClick' \| 'onMouseDown' \| 'onMouseUp' \| 'onPointerDown' \| 'onPointerUp' \| false` | `'onClick'` | | `touchEvent` | 否 | `'onTouchEnd' \| 'onTouchStart' \| false` | `'onTouchEnd'` | ### Popover ```tsx import Popover from '@mui/material/Popover'; import { Popover } from '@mui/material'; ``` 原生继承: `Modal`. 父级与 DOM 属性未被伪造为本组件新属性。 | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `open` | 是 | `bool` | — | | `action` | 否 | `ref` | — | | `anchorEl` | 否 | `HTML element \| func` | — | | `anchorOrigin` | 否 | `{ horizontal: 'center' \| 'left' \| 'right' \| number, vertical: 'bottom' \| 'center' \| 'top' \| number }` | `{ vertical: 'top', horizontal: 'left', }` | | `anchorPosition` | 否 | `{ left: number, top: number }` | — | | `anchorReference` | 否 | `'anchorEl' \| 'anchorPosition' \| 'none'` | `'anchorEl'` | | `children` | 否 | `node` | — | | `classes` | 否 | `object` | — | | `container` | 否 | `HTML element \| func` | — | | `disableAutoFocus` | 否 | `bool` | `false` | | `disableScrollLock` | 否 | `bool` | `false` | | `elevation` | 否 | `integer` | `8` | | `marginThreshold` | 否 | `number` | `16` | | `onClose` | 否 | `func` | — | | `slotProps` | 否 | `{ backdrop?: func \| object, paper?: func \| object, root?: func \| object, transition?: func \| object }` | `{}` | | `slots` | 否 | `{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }` | `{}` | | `sx` | 否 | `Array \| func \| object` | — | | `transformOrigin` | 否 | `{ horizontal: 'center' \| 'left' \| 'right' \| number, vertical: 'bottom' \| 'center' \| 'top' \| number }` | `{ vertical: 'top', horizontal: 'left', }` | | `transitionDuration` | 否 | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `'auto'` | ### Popper ```tsx import Popper from '@mui/material/Popper'; import { Popper } from '@mui/material'; ``` | 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 | | --- | --- | --- | --- | | `open` | 是 | `bool` | — | | `anchorEl` | 否 | `HTML element \| object \| func` | — | | `children` | 否 | `node \| func` | — | | `component` | 否 | `elementType` | — | | `container` | 否 | `HTML element \| func` | — | | `disablePortal` | 否 | `bool` | `false` | | `keepMounted` | 否 | `bool` | `false` | | `modifiers` | 否 | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array, requiresIfExists?: Array }>` | — | | `placement` | 否 | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` | | `popperOptions` | 否 | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` | | `popperRef` | 否 | `ref` | — | | `slotProps` | 否 | `{ root?: func \| object }` | `{}` | | `slots` | 否 | `{ root?: elementType }` | `{}` | | `sx` | 否 | `Array \| func \| object` | — | | `transition` | 否 | `bool` | `false` | ## 原生源码声明 声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。 ### vendor/src/Menu/Menu.d.ts ```ts import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '../internal'; import { PaperProps } from '../Paper'; import { PopoverProps } from '../Popover'; import { MenuListProps } from '../MenuList'; import { ModalProps } from '../Modal'; import { BackdropProps } from '../Backdrop'; import { TransitionProps } from '../transitions/types'; import { MenuClasses } from './menuClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface MenuRootSlotPropsOverrides {} export interface MenuPaperSlotPropsOverrides {} export interface MenuTransitionSlotPropsOverrides {} export interface MenuListSlotPropsOverrides {} export interface MenuBackdropSlotPropsOverrides {} export interface MenuSlots { /** * The component used for the popper. * @default Modal */ root: React.ElementType; /** * The component used for the paper. * @default PopoverPaper */ paper: React.ElementType; /** * The component used for the list. * @default MenuList */ list: React.ElementType; /** * The component used for the transition slot. * @default Grow */ transition: React.ElementType; /** * The component used for the backdrop slot. * @default Backdrop */ backdrop: React.ElementType; } export type MenuSlotsAndSlotProps = CreateSlotsAndSlotProps< MenuSlots, { /** * Props forwarded to the root slot. * By default, the available props are based on the [Popover](https://mui.com/material-ui/api/popover/#props) component. */ root: SlotProps, MenuRootSlotPropsOverrides, MenuOwnerState>; /** * Props forwarded to the paper slot. * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component. */ paper: SlotProps, MenuPaperSlotPropsOverrides, MenuOwnerState>; /** * Props forwarded to the list slot. * By default, the available props are based on the [MenuList](https://mui.com/material-ui/api/menu-list/#props) component. */ list: SlotProps, MenuListSlotPropsOverrides, MenuOwnerState>; /** * Props forwarded to the transition slot. * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component. */ transition: SlotComponentProps< // use SlotComponentProps because transition slot does not support `component` and `sx` prop React.ElementType, TransitionProps & MenuTransitionSlotPropsOverrides, MenuOwnerState >; /** * Props forwarded to the backdrop slot. * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component. */ backdrop: SlotProps< React.ElementType, MenuBackdropSlotPropsOverrides, MenuOwnerState >; } >; export interface MenuProps extends StandardProps>, MenuSlotsAndSlotProps { /** * An HTML element, or a function that returns one. * It's used to set the position of the menu. */ anchorEl?: PopoverProps['anchorEl'] | undefined; /** * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled * children are not focusable. If you set this prop to `false` focus will be placed * on the parent modal container. This has severe accessibility implications * and should only be considered if you manage focus otherwise. * @default true */ autoFocus?: boolean | undefined; /** * Menu contents, normally `MenuItem`s. */ children?: React.ReactNode; /** * Override or extend the styles applied to the component. */ classes?: Partial | undefined; /** * When opening the menu will not focus the active item but the `[role="menu"]` * unless `autoFocus` is also set to `false`. Not using the default means not * following WAI-ARIA authoring practices. Please be considerate about possible * accessibility implications. * @default false */ disableAutoFocusItem?: boolean | undefined; /** * Callback fired when the component requests to be closed. * * @param {object} event The event source of the callback. * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`. */ onClose?: PopoverProps['onClose'] | undefined; /** * If `true`, the component is shown. */ open: boolean; /** * `classes` prop applied to the [`Popover`](https://mui.com/material-ui/api/popover/) element. */ PopoverClasses?: PopoverProps['classes'] | undefined; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps | undefined; /** * The length of the transition in `ms`, or 'auto' * @default 'auto' */ transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined; /** * The variant to use. Use `menu` to prevent selected items from impacting the initial focus. * @default 'selectedMenu' */ variant?: 'menu' | 'selectedMenu' | undefined; } export interface MenuOwnerState extends Omit {} export declare const MenuPaper: React.FC; export default function Menu(props: MenuProps): React.JSX.Element; ``` ### vendor/src/MenuItem/MenuItem.d.ts ```ts import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { MenuItemClasses } from './menuItemClasses'; export interface MenuItemOwnProps { /** * If `true`, the list item is focused during the first mount. * Focus will also be triggered if the value changes from false to true. * @default false */ autoFocus?: boolean | undefined; /** * Override or extend the styles applied to the component. */ classes?: Partial | undefined; /** * If `true`, compact vertical padding designed for keyboard and mouse input is used. * The prop defaults to the value inherited from the parent Menu component. * @default false */ dense?: boolean | undefined; /** * If `true`, the component is disabled. * @default false */ disabled?: boolean | undefined; /** * If `true`, the left and right padding is removed. * @default false */ disableGutters?: boolean | undefined; /** * If `true`, a 1px light border is added to the bottom of the menu item. * @default false */ divider?: boolean | undefined; /** * If `true`, the component is selected. * For `menuitemcheckbox` and `menuitemradio` roles, this also drives `aria-checked`. * @default false */ selected?: boolean | undefined; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps | undefined; } export type MenuItemTypeMap< AdditionalProps = {}, RootComponent extends React.ElementType = 'li', > = ExtendButtonBaseTypeMap<{ props: AdditionalProps & MenuItemOwnProps; defaultComponent: RootComponent; }>; declare const MenuItem: ExtendButtonBase; export type MenuItemProps< RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'], AdditionalProps = {}, > = OverrideProps, RootComponent> & { component?: React.ElementType | undefined; }; ``` ### vendor/src/MenuList/MenuList.d.ts ```ts import * as React from 'react'; import { ExtendList, ExtendListTypeMap } from '../List'; import { OverrideProps } from '../OverridableComponent'; export interface MenuListOwnProps { /** * If `true`, will focus the `[role="menu"]` container and move into tab order. * @default false */ autoFocus?: boolean | undefined; /** * If `true`, will focus the first menuitem if `variant="menu"` or selected item * if `variant="selectedMenu"`. * @default false */ autoFocusItem?: boolean | undefined; /** * MenuList contents, normally `MenuItem`s. */ children?: React.ReactNode; /** * If `true`, will allow focus on disabled items. * @default false */ disabledItemsFocusable?: boolean | undefined; /** * If `true`, the menu items will not wrap focus. * @default false */ disableListWrap?: boolean | undefined; /** * The variant to use. Use `menu` to prevent selected items from impacting the initial focus * and the vertical alignment relative to the anchor element. * @default 'selectedMenu' */ variant?: 'menu' | 'selectedMenu' | undefined; } export type MenuListTypeMap< AdditionalProps = {}, RootComponent extends React.ElementType = 'ul', > = ExtendListTypeMap<{ props: AdditionalProps & MenuListOwnProps; defaultComponent: RootComponent; }>; export type MenuListClassKey = keyof NonNullable; declare const MenuList: ExtendList; export type MenuListProps< RootComponent extends React.ElementType = MenuListTypeMap['defaultComponent'], AdditionalProps = {}, > = OverrideProps, RootComponent> & { component?: React.ElementType | undefined; }; ``` ### vendor/src/ClickAwayListener/ClickAwayListener.tsx ```ts import * as React from 'react'; import PropTypes from 'prop-types'; import contains from '@mui/utils/contains'; import ownerDocument from '@mui/utils/ownerDocument'; import useForkRef from '@mui/utils/useForkRef'; import useEventCallback from '@mui/utils/useEventCallback'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import exactProp from '@mui/utils/exactProp'; import getReactElementRef from '@mui/utils/getReactElementRef'; type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp'; type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd'; export interface ClickAwayListenerProps { /** * The wrapped element. */ children: React.ReactElement; /** * If `true`, the React tree is ignored and only the DOM tree is considered. * This prop changes how portaled elements are handled. * @default false */ disableReactTree?: boolean | undefined; /** * The mouse event to listen to. You can disable the listener by providing `false`. * @default 'onClick' */ mouseEvent?: ClickAwayMouseEventHandler | false | undefined; /** * Callback fired when a "click away" event is detected. */ onClickAway: (event: MouseEvent | TouchEvent) => void; /** * The touch event to listen to. You can disable the listener by providing `false`. * @default 'onTouchEnd' */ touchEvent?: ClickAwayTouchEventHandler | false | undefined; } ``` ### vendor/src/Popover/Popover.d.ts ```ts import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotComponentProps } from '@mui/utils/types'; import { BackdropProps } from '../Backdrop'; import { Theme } from '../styles'; import { InternalStandardProps as StandardProps } from '../internal'; import { PaperProps } from '../Paper'; import { ModalProps } from '../Modal'; import { TransitionProps } from '../transitions/types'; import { PopoverClasses } from './popoverClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface PopoverSlots { /** * The component used for the root slot. * @default Modal */ root: React.ElementType; /** * The component used for the paper slot. * @default Paper */ paper: React.ElementType; /** * The component used for the transition slot. * @default Grow */ transition: React.ElementType; /** * The component used for the backdrop slot. * @default Backdrop */ backdrop: React.ElementType; } export interface PopoverRootSlotPropsOverrides {} export interface PopoverPaperSlotPropsOverrides {} export interface PopoverTransitionSlotPropsOverrides {} export interface PopoverBackdropSlotPropsOverrides {} export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps< PopoverSlots, { /** * Props forwarded to the root slot. * By default, the available props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component. */ root: SlotProps< React.ElementType, PopoverRootSlotPropsOverrides, PopoverOwnerState >; /** * Props forwarded to the paper slot. * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component. */ paper: SlotProps< React.ElementType, PopoverPaperSlotPropsOverrides, PopoverOwnerState >; /** * Props forwarded to the transition slot. * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component. */ transition: SlotComponentProps< // use SlotComponentProps because transition slot does not support `component` and `sx` prop React.ElementType, TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState >; /** * Props forwarded to the backdrop slot. * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component. */ backdrop: SlotProps< React.ElementType, PopoverBackdropSlotPropsOverrides, PopoverOwnerState >; } >; export interface PopoverOrigin { vertical: 'top' | 'center' | 'bottom' | number; horizontal: 'left' | 'center' | 'right' | number; } export interface PopoverPosition { top: number; left: number; } export type PopoverReference = 'anchorEl' | 'anchorPosition' | 'none'; interface PopoverVirtualElement { getBoundingClientRect: () => DOMRect; nodeType: Node['ELEMENT_NODE']; } export interface PopoverProps extends StandardProps< Omit, 'children' >, PopoverSlotsAndSlotProps { /** * A ref for imperative actions. * It currently only supports updatePosition() action. */ action?: React.Ref | undefined; /** * An HTML element, [PopoverVirtualElement](https://mui.com/material-ui/react-popover/#virtual-element), * or a function that returns either. * It's used to set the position of the popover. */ anchorEl?: | null | Element | PopoverVirtualElement | (() => Element | PopoverVirtualElement | null) | undefined; /** * This is the point on the anchor where the popover's * `anchorEl` will attach to. This is not used when the * anchorReference is 'anchorPosition'. * * Options: * vertical: [top, center, bottom]; * horizontal: [left, center, right]. * @default { * vertical: 'top', * horizontal: 'left', * } */ anchorOrigin?: PopoverOrigin | undefined; /** * This is the position that may be used to set the position of the popover. * The coordinates are relative to the application's client area. */ anchorPosition?: PopoverPosition | undefined; /** * This determines which anchor prop to refer to when setting * the position of the popover. * @default 'anchorEl' */ anchorReference?: PopoverReference | undefined; /** * The content of the component. */ children?: React.ReactNode; /** * Override or extend the styles applied to the component. */ classes?: Partial | undefined; /** * An HTML element, component instance, or function that returns either. * The `container` will passed to the Modal component. * * By default, it uses the body of the anchorEl's top-level document object, * so it's simply `document.body` most of the time. */ container?: ModalProps['container'] | undefined; /** * The elevation of the popover. * @default 8 */ elevation?: number | undefined; /** * Specifies how close to the edge of the window the popover can appear. * If null, the popover will not be constrained by the window. * @default 16 */ marginThreshold?: number | null | undefined; onClose?: ModalProps['onClose'] | undefined; /** * If `true`, the component is shown. */ open: boolean; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps | undefined; /** * This is the point on the popover which * will attach to the anchor's origin. * * Options: * vertical: [top, center, bottom, x(px)]; * horizontal: [left, center, right, x(px)]. * @default { * vertical: 'top', * horizontal: 'left', * } */ transformOrigin?: PopoverOrigin | undefined; /** * Set to 'auto' to automatically calculate transition time based on height. * @default 'auto' */ transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined; } export interface PopoverOwnerState extends Omit {} export interface PopoverActions { updatePosition(): void; } export function getOffsetTop(rect: DOMRect, vertical: number | 'center' | 'bottom' | 'top'): number; export function getOffsetLeft( rect: DOMRect, horizontal: number | 'center' | 'right' | 'left', ): number; type PopoverRootProps = NonNullable['root']; type PopoverPaperProps = NonNullable['paper']; export declare const PopoverRoot: React.FC; export declare const PopoverPaper: React.FC; export default function Popover(props: PopoverProps): React.JSX.Element; ``` ### vendor/src/Popper/Popper.tsx ```ts import { SxProps } from '@mui/system'; import { useRtl } from '@mui/system/RtlProvider'; import refType from '@mui/utils/refType'; import HTMLElementType from '@mui/utils/HTMLElementType'; import PropTypes from 'prop-types'; import * as React from 'react'; import BasePopper from './BasePopper'; import { PopperProps as BasePopperProps } from './BasePopper.types'; import { Theme } from '../styles'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; export interface PopperProps extends Omit { /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component?: React.ElementType | undefined; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps | undefined; } ``` ## 安装后验收 执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。 ## 来源与许可 https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。 --- JGuang 全部资源索引: https://jiguang132.com/llms.txt