MenuItemAPI

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

演示

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

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

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

名称	类型	描述
children	node	组件的内容。

`ref` 被转发到根元素。

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

您可以使用 JoyMenuItem 通过主题更改此组件的默认 props。

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

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

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`，则应用于内部 `component` 元素的状态类。
.Mui-focusVisible		应用于 `component` 的 `focusVisibleClassName` prop 的状态类。
.Mui-selected		如果 `selected={true}`，则应用于根元素的状态类。
.MuiMenuItem-colorContext	colorContext	当颜色反转被触发时应用于根元素的类名。
.MuiMenuItem-colorDanger	colorDanger	如果 `color="danger"`，则应用于根元素的类名。
.MuiMenuItem-colorNeutral	colorNeutral	如果 `color="neutral"`，则应用于根元素的类名。
.MuiMenuItem-colorPrimary	colorPrimary	如果 `color="primary"`，则应用于根元素的类名。
.MuiMenuItem-colorSuccess	colorSuccess	如果 `color="success"`，则应用于根元素的类名。
.MuiMenuItem-colorWarning	colorWarning	如果 `color="warning"`，则应用于根元素的类名。
.MuiMenuItem-variantOutlined	variantOutlined	如果 `variant="outlined"`，则应用于根元素的状态类。
.MuiMenuItem-variantPlain	variantPlain	如果 `variant="plain"`，则应用于根元素的状态类。
.MuiMenuItem-variantSoft	variantSoft	如果 `variant="soft"`，则应用于根元素的状态类。
.MuiMenuItem-variantSolid	variantSolid	如果 `variant="solid"`，则应用于根元素的状态类。

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

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