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

ListItemAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

组件的内容。

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

组件的颜色。它支持对该组件有意义的那些主题颜色。

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

componentelementType-

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

endActionnode-

要在 ListItem 末尾显示的元素。

nestedboolfalse

如果 true，则组件可以包含 NestedList。

slotProps{ endAction?: func
| object, root?: func
| object, startAction?: func
| object }		{}

用于每个内部插槽的 props。

slots{ endAction?: elementType, root?: elementType, startAction?: elementType }{}

用于每个内部插槽的组件。

有关更多详细信息，请参阅下面的插槽 API。

startActionnode-

要在 ListItem 开头显示的元素。

stickyboolfalse

如果 true，则组件具有粘性定位（top = 0）。

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

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

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

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

要使用的全局 variant。

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

ref 被转发到根元素。

主题默认 props

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

插槽

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

插槽名称类名默认组件描述
root.MuiListItem-root'li'渲染根的组件。
startAction.MuiListItem-startAction'div'渲染开始操作的组件。
endAction.MuiListItem-endAction'div'渲染结束操作的组件。

CSS 类

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

类名规则名称描述
.MuiListItem-colorContextcolorContext当颜色反转被触发时，应用于根元素的类名。
.MuiListItem-colorDangercolorDanger如果 color="danger"，应用于根元素的类名。
.MuiListItem-colorNeutralcolorNeutral如果 color="neutral"，应用于根元素的类名。
.MuiListItem-colorPrimarycolorPrimary如果 color="primary"，应用于根元素的类名。
.MuiListItem-colorSuccesscolorSuccess如果 color="success"，应用于根元素的类名。
.MuiListItem-colorWarningcolorWarning如果 color="warning"，应用于根元素的类名。
.MuiListItem-nestednested如果 nested={true}，则应用于根元素的类名。
.MuiListItem-nestingnesting如果它在嵌套列表项下，则应用于根元素的类名。
.MuiListItem-stickysticky如果 sticky={true}，则应用于根元素的类名。
.MuiListItem-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的状态类。
.MuiListItem-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的状态类。
.MuiListItem-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的状态类。
.MuiListItem-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的状态类。

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

源代码

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