MenuAPI

React Menu 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

有关此 React 组件的使用示例和详细信息，请访问组件演示页面

导入

import Menu from '@mui/joy/Menu';
// or
import { Menu } from '@mui/joy';

阅读这篇关于最小化 bundle 大小的指南，了解它们之间的区别。

属性

Popper 组件的属性也可用。

名称	类型	默认值	描述
actions	ref	-	具有命令式操作的 ref。它允许选择第一个或最后一个菜单项。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning'	'neutral'	组件的颜色。它支持对此组件有意义的那些主题颜色。要了解如何添加自己的颜色，请查看主题组件——扩展颜色。
component	elementType	-	用于根节点的组件。可以是用于 HTML 元素的字符串，也可以是组件。
disablePortal	bool	false	`children` 将位于父组件的 DOM 层次结构下。
invertedColors	bool	false	如果为 `true`，则具有隐式 color 属性的子元素会反转其颜色，以匹配组件的 variant 和 color。
keepMounted	bool	false	始终将子元素保留在 DOM 中。此属性在 SEO 情况或您想最大化 Popper 的响应性时可能很有用。
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<string>, requiresIfExists?: Array<string> }>	-	Popper.js 基于“插件式”架构，其大多数功能都是完全封装的“修饰符”。修饰符是一个函数，每次 Popper.js 需要计算 popper 的位置时都会调用它。因此，修饰符应该非常高效，以避免瓶颈。要了解如何创建修饰符，请阅读修饰符文档。
onClose	func	-	当焦点离开菜单且菜单应关闭时触发。
onItemsChange	func	-	当菜单中显示的项目更改时调用的函数。
open	bool	false	bool
控制是否显示菜单。	size 'sm' \| 'md' \| 'lg'	\| string	'md' 组件的大小（影响其他嵌套的 list* 组件，因为 `Menu` 继承了 `List`）。
要了解如何向组件添加自定义尺寸，请查看主题组件——扩展尺寸。	slotProps { root?: func	{}	\| object }
slots	{ root?: elementType }	{}	用于内部每个插槽的组件。有关更多详细信息，请参阅下面的插槽 API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| 'lg'	'outlined'	要使用的全局 variant。要了解如何添加自己的 variant，请查看主题组件——扩展 variant。

`ref` 被转发到根元素。

继承

虽然上面没有明确记录，但 Popper 组件的属性在 Menu 中也可用。您可以利用这一点来定位嵌套组件。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称	类名	默认组件	描述
root	.MuiMenu-root	`'ul'`	渲染根的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名	规则名称	描述
.Mui-expanded		当菜单打开时应用于根元素的类名。
.MuiMenu-colorContext	colorContext	当颜色反转被触发时应用于根元素的类名。
.MuiMenu-colorDanger	colorDanger	如果 `color="danger"` 应用于根元素的类名。
.MuiMenu-colorNeutral	colorNeutral	如果 `color="neutral"` 应用于根元素的类名。
.MuiMenu-colorPrimary	colorPrimary	如果 `color="primary"` 应用于根元素的类名。
.MuiMenu-colorSuccess	colorSuccess	如果 `color="success"` 应用于根元素的类名。
.MuiMenu-colorWarning	colorWarning	如果 `color="warning"` 应用于根元素的类名。
.MuiMenu-listbox	listbox	应用于 listbox 元素的类名。
.MuiMenu-sizeLg	sizeLg	如果 `size="lg"` 应用于根元素的类名。
.MuiMenu-sizeMd	sizeMd	如果 `size="md"` 应用于根元素的类名。
.MuiMenu-sizeSm	sizeSm	如果 `size="sm"` 应用于根元素的类名。
.MuiMenu-variantOutlined	variantOutlined	如果 `variant="outlined"` 应用于根元素的类名。
.MuiMenu-variantPlain	variantPlain	如果 `variant="plain"` 应用于根元素的类名。
.MuiMenu-variantSoft	variantSoft	如果 `variant="soft"` 应用于根元素的类名。
.MuiMenu-variantSolid	variantSolid	如果 `variant="solid"` 应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

使用全局类名。
在自定义主题中使用规则名称作为组件的styleOverrides 属性的一部分。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。