菜单

通过原生菜单的键盘导航与选择提供临时操作。

本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。

使用场景与业务边界

激活 MenuItem 不提供路由或保存；须提供锚点、打开状态和关闭策略。

原生组成与范围

Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper

保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。

原生安装与初始化

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 结构、可空值与泛型仍按固定源码保留。

可运行原生示例

下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。

• 基础菜单 · BasicMenu · 上游原生示例
• 图标菜单 · IconMenu · 上游原生示例
• 紧凑菜单 · DenseMenu · 上游原生示例
• 选中菜单项 · SimpleListMenu · 上游原生示例
• 复选与单选菜单项 · CheckboxMenu · 上游原生示例
• 复选与单选菜单项 · RadioMenu · 上游原生示例
• 菜单定位 · PositionedMenu · 上游原生示例
• 组合菜单列表 · MenuListComposition · 上游原生示例
• 账户菜单 · AccountMenu · 上游原生示例
• 定制样式 · CustomizedMenus · 上游原生示例
• 限制菜单高度 · LongMenu · 上游原生示例
• 限制说明 · TypographyMenu · 上游原生示例
• 更换过渡动画 · FadeMenu · 上游原生示例
• 上下文菜单 · ContextMenu · 上游原生示例
• 分组菜单 · GroupedMenu · 上游原生示例

尚未支持的额外示例

这些条目仍保留在上游清单中，不静默跳过，也不展示为已完成预览。需要补充依赖／框架验收后再纳入可运行列表。

• 额外弹层状态库 · MenuPopupState: material-ui-popup-state

真实使用示例

固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。

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 | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id={buttonId}
        aria-controls={open ? menuId : undefined}
        aria-haspopup="true"
        aria-expanded={open}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <Menu
        id={menuId}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        slotProps={{
          list: {
            'aria-labelledby': buttonId,
          },
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

示例依赖边界

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

import Menu from '@mui/material/Menu';
import { Menu } from '@mui/material';

原生继承: Popover. 父级与 DOM 属性未被伪造为本组件新属性。

MenuItem

import MenuItem from '@mui/material/MenuItem';
import { MenuItem } from '@mui/material';

原生继承: ButtonBase. 父级与 DOM 属性未被伪造为本组件新属性。

MenuList

import MenuList from '@mui/material/MenuList';
import { MenuList } from '@mui/material';

原生继承: List. 父级与 DOM 属性未被伪造为本组件新属性。

ClickAwayListener

import ClickAwayListener from '@mui/material/ClickAwayListener';
import { ClickAwayListener } from '@mui/material';

Popover

import Popover from '@mui/material/Popover';
import { Popover } from '@mui/material';

原生继承: Modal. 父级与 DOM 属性未被伪造为本组件新属性。

Popper

import Popper from '@mui/material/Popper';
import { Popper } from '@mui/material';

原生源码声明

声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。

vendor/src/Menu/Menu.d.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<React.ElementType<ModalProps>, 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<React.ElementType<PaperProps>, 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<React.ElementType<MenuListProps>, 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>,
      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<BackdropProps>,
      MenuBackdropSlotPropsOverrides,
      MenuOwnerState
    >;
  }
>;

export interface MenuProps
  extends StandardProps<Omit<PopoverProps, 'slots' | 'slotProps'>>, 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<MenuClasses> | 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<Theme> | 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<MenuProps, 'slots' | 'slotProps'> {}

export declare const MenuPaper: React.FC<PaperProps>;

export default function Menu(props: MenuProps): React.JSX.Element;

vendor/src/MenuItem/MenuItem.d.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<MenuItemClasses> | 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<Theme> | undefined;
}

export type MenuItemTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'li',
> = ExtendButtonBaseTypeMap<{
  props: AdditionalProps & MenuItemOwnProps;
  defaultComponent: RootComponent;
}>;

declare const MenuItem: ExtendButtonBase<MenuItemTypeMap>;

export type MenuItemProps<
  RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<MenuItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};

vendor/src/MenuList/MenuList.d.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<MenuListTypeMap['props']['classes']>;

declare const MenuList: ExtendList<MenuListTypeMap>;

export type MenuListProps<
  RootComponent extends React.ElementType = MenuListTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<MenuListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};

vendor/src/ClickAwayListener/ClickAwayListener.tsx

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<any>;
  /**
   * 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

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<ModalProps>,
      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<PaperProps>,
      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>,
      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<BackdropProps>,
      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<ModalProps, 'slots' | 'slotProps' | 'BackdropProps' | 'BackdropComponent'>,
      'children'
    >,
    PopoverSlotsAndSlotProps {
  /**
   * A ref for imperative actions.
   * It currently only supports updatePosition() action.
   */
  action?: React.Ref<PopoverActions> | 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<PopoverClasses> | 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<Theme> | 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<PopoverProps, 'slots' | 'slotProps'> {}

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<PopoverProps['slotProps']>['root'];

type PopoverPaperProps = NonNullable<PopoverProps['slotProps']>['paper'];

export declare const PopoverRoot: React.FC<PopoverRootProps>;

export declare const PopoverPaper: React.FC<PopoverPaperProps>;

export default function Popover(props: PopoverProps): React.JSX.Element;

vendor/src/Popper/Popper.tsx

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<BasePopperProps, 'direction'> {
  /**
   * 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<Theme> | undefined;
}

安装后验收

执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。

来源与许可

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。