MenuListAPI

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

演示

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

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

阅读本指南，了解有关最小化 bundle size 的区别。reading this guide on minimizing bundle size。

遵循 https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ 的永久显示菜单。它被公开以帮助自定义 Menu 组件，如果您单独使用它，则需要手动将焦点移入组件。一旦焦点放置在组件内部，它就可以完全通过键盘访问。

List 组件的 props 也可用。List component are also available.

名称	类型	默认	描述
autoFocus	bool	false	如果 `true`，将聚焦 `[role="menu"]` 容器并移入 tab 顺序。
autoFocusItem	bool	false	如果 `true`，如果 `variant="menu"` 将聚焦第一个 menuitem，如果 `variant="selectedMenu"` 将聚焦选定的项目。
children	node	-	MenuList 内容，通常是 `MenuItem`。
disabledItemsFocusable	bool	false	如果 `true`，将允许聚焦禁用项目。
disableListWrap	bool	false	如果 `true`，菜单项将不会环绕焦点。
variant	'menu' \| 'selectedMenu'	'selectedMenu'	要使用的变体。使用 `menu` 以防止选定的项目影响初始焦点以及相对于锚元素的垂直对齐。

ref 被转发到根元素。

虽然上面没有明确记录，但 List 组件的 props 在 MenuList 中也可用。您可以利用这一点来target nested components。

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

类名	规则名称	描述
.MuiMenuList-dense	dense	如果 dense，则应用于根元素的样式。
.MuiMenuList-padding	padding	除非 `disablePadding={true}`，否则应用于根元素的样式。
.MuiMenuList-root	root	应用于根元素的样式。
.MuiMenuList-subheader	subheader	如果提供了 `subheader`，则应用于根元素的样式。

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

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