跳到内容

TreeItemAPI

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

演示

导入

import { TreeItem } from '@mui/x-tree-view/TreeItem';
// or
import { TreeItem } from '@mui/x-tree-view';
// or
import { TreeItem } from '@mui/x-tree-view-pro';

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

Props

原生组件的 Props 也可用。

名称类型默认描述
itemId*string-

项目的 id。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下方的CSS 类 API。

ContentComponent元素类型TreeItemContent

用于渲染项目内容的组件。

ContentPropsobject-

应用于 ContentComponent 的 Props。

disabledboolfalse

如果为 true，则禁用该项目。

labelnode-

树项目标签。

onFocusunsupportedProp-

不支持此 prop。如果您需要监视项目的焦点，请使用树上的 onItemFocus 回调。

onKeyDownfunc-

当在项目上按下键盘上的键时触发的回调。

slotPropsobject{}

用于每个组件插槽的 props。

slotsobject{}

可覆盖的组件插槽。

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

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

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

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

ref 被转发到根元素。

主题默认 props

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

插槽

插槽名称类名默认组件描述
collapseIcon用于折叠项目的图标。
expandIcon用于展开项目的图标。
endIcon显示在末尾项目旁边的图标。
icon显示在树项目标签旁边的图标。
groupTransition.MuiTreeItem-groupTransitionTreeItem2Group动画显示/消失项目子组件的组件。

CSS 类

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

类名规则名称描述
.Mui-disabled禁用时应用于元素的 State 类。
.Mui-expanded展开时应用于内容元素的 State 类。
.Mui-focused聚焦时应用于内容元素的 State 类。
.Mui-selected选中时应用于内容元素的 State 类。
.MuiTreeItem-checkboxcheckbox应用于 checkbox 元素的样式。
.MuiTreeItem-contentcontent应用于 content 元素的样式。
.MuiTreeItem-dragAndDropOverlaydragAndDropOverlay应用于拖放 overlay 的样式。
.MuiTreeItem-editableeditable应用于可编辑项目的内容的样式。
.MuiTreeItem-editingediting启用编辑时应用于 content 元素的样式。
.MuiTreeItem-iconContainericonContainer应用于树项目图标的样式。
.MuiTreeItem-labellabel应用于 label 元素的样式。
.MuiTreeItem-labelInputlabelInput启用编辑时应用于可见的 input 元素的样式。
.MuiTreeItem-rootroot应用于根元素的样式。

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

源代码

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