Rich Tree View - Customization

Learn how to customize the Rich Tree View component.

Basics

Custom icons

Use the collapseIcon slot, the expandIcon slot and the defaultEndIcon prop to customize RichTreeView icons. The demo below shows how to add icons using both an existing icon library, such as Material Icons, and creating an icon from scratch using Material UI's SvgIcon.

Custom toggle animations

Use the groupTransition slot on TreeItem to pass a component that handles your animation.

The demo below is animated using Material UI's Collapse component together with the react-spring library.

Custom styling

Use treeItemClasses to target internal elements of a TreeItem and change its styles.

Custom Tree Item

You can use the TreeItem customization API to build new layouts and manage behaviors.

See Tree Item customization to learn more about the anatomy of TreeItem and the customization utilities provided.

Headless API

Use the useTreeItem() hook to create your ownn fully custom component. The demo below shows how to add an avatar and custom typography elements.

Common examples

File explorer

The file explorer demo below leverages many of the customization options described above to make RichTreeView look significantly different than its default design:

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <RichTreeView />
• <TreeItem />