跳到主要内容跳到主要内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

ListItemButtonAPI

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

演示

导入

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

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

Props

也提供原生组件的 Props。

名称类型默认值描述
actionfunc
| { current?: { focusVisible: func } }		-

用于命令式操作的 ref。目前仅支持 focusVisible() 操作。

autoFocusboolfalse

如果为 true，则列表项将在首次挂载期间获得焦点。如果值从 false 变为 true，也会触发焦点。

childrennode-

组件的内容。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

组件的颜色。它支持适用于此组件的那些主题颜色。

要了解如何添加您自己的颜色，请查看 主题组件 - 扩展颜色。

componentelementType-

用于根节点的组件。可以是 HTML 元素的字符串或组件。

disabledboolfalse

如果 true, 组件将被禁用。

focusVisibleClassNamestring-

此 prop 可以帮助识别哪个元素具有键盘焦点。当元素通过键盘交互获得焦点时，将应用此类名称。它是 CSS :focus-visible 选择器 的 polyfill。 使用此功能的理由 在此处进行了解释。 如果需要，可以使用 polyfill 将 focus-visible 类应用于其他组件。

orientation'horizontal'
| 'vertical'		'horizontal'

内容方向流。

selectedboolfalse

如果 true, 组件将被选中。

slotProps{ root?: func
| object }		{}

用于内部每个 slot 的 props。

slots{ root?: elementType }{}

用于内部每个 slot 的组件。

有关更多详细信息，请参见下面的 Slots API。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参见 `sx` 页面。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的 全局 variant。

要了解如何添加您自己的 variant，请查看 主题组件 - 扩展 variant。

ref 被转发到根元素。

主题默认 props

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

Slots

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

Slot 名称类名默认组件描述
root.MuiListItemButton-root'div'渲染根的组件。

CSS 类

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

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于内部 component 元素的 State 类。
.Mui-focusVisible应用于 component 的 focusVisibleClassName prop 的 State 类。
.Mui-selected如果 selected={true}，则应用于根元素的 State 类。
.MuiListItemButton-colorContextcolorContext如果 color="context"，则应用于根元素的类名。
.MuiListItemButton-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiListItemButton-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiListItemButton-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiListItemButton-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiListItemButton-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiListItemButton-horizontalhorizontal如果 orientation="horizontal"，则应用于根元素的类名。
.MuiListItemButton-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的 State 类。
.MuiListItemButton-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的 State 类。
.MuiListItemButton-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的 State 类。
.MuiListItemButton-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的 State 类。
.MuiListItemButton-verticalvertical如果 orientation="vertical"，则应用于根元素的类名。

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

源代码

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