TreeItem2 API
API reference docs for the React TreeItem2 component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
// or
import { TreeItem2 } from '@mui/x-tree-view';
// or
import { TreeItem2 } from '@mui/x-tree-view-pro';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
itemId* | string | - | The id of the item. Must be unique. |
children | node | - | The content of the component. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
disabled | bool | false | If |
id | string | - | The id attribute of the item. If not provided, it will be generated. |
label | node | - | The label of the item. |
onBlur | func | - | Callback fired when the item root is blurred. |
onFocus | unsupportedProp | - | This prop isn't supported. Use the |
onKeyDown | func | - | Callback fired when a key is pressed on the keyboard and the tree is in focus. |
slotProps | object | {} | The props used for each component slot. |
slots | object | {} | Overridable component slots. See Slots API below for more details. |
ref
is forwarded to the root element.Theme default props
You can use MuiTreeItem2
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
root | .MuiTreeItem2-root | TreeItem2Root | The component that renders the root. |
content | .MuiTreeItem2-content | TreeItem2Content | The component that renders the content of the item. (e.g.: everything related to this item, not to its children). |
groupTransition | .MuiTreeItem2-groupTransition | TreeItem2GroupTransition | The component that renders the children of the item. |
iconContainer | .MuiTreeItem2-iconContainer | TreeItem2IconContainer | The component that renders the icon. |
checkbox | .MuiTreeItem2-checkbox | TreeItem2Checkbox | The component that renders the item checkbox for selection. |
label | .MuiTreeItem2-label | TreeItem2Label | The component that renders the item label. |
labelInput | .MuiTreeItem2-labelInput | TreeItem2LabelInput | The component that renders the input to edit the label when the item is editable and is currently being edited. |
dragAndDropOverlay | .MuiTreeItem2-dragAndDropOverlay | TreeItem2DragAndDropOverlay | The component that renders the overlay when an item reordering is ongoing. Warning: This slot is only useful when using the <RichTreeViewPro /> component. |
collapseIcon | The icon used to collapse the item. | ||
expandIcon | The icon used to expand the item. | ||
endIcon | The icon displayed next to an end item. | ||
icon | The icon to display next to the Tree Item's label. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.Mui-disabled | State class applied to the element when disabled. | |
.Mui-expanded | State class applied to the content element when expanded. | |
.Mui-focused | State class applied to the content element when focused. | |
.Mui-selected | State class applied to the content element when selected. | |
.MuiTreeItem2-editable | editable | Styles applied to the content of the items that are editable. |
.MuiTreeItem2-editing | editing | Styles applied to the content element when editing is enabled. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.