Top
TreeView - Styling & Theming
TreeView
To style and customize the appearance of <TreeView />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <TreeView /> className - note that this will not override the default <TreeView /> className of zippy-react-toolkit-tree-view, but rather will be appended to the classes the component already has.
ClassNameDescription
zippy-react-toolkit-tree-view
This is the block className for all tree views. Always applied.
zippy-react-toolkit-tree-view--selection-enabled
Applied when enableSelection=true.
zippy-react-toolkit-tree-view--check-enabled
Applied when enableChecked=true.
zippy-react-toolkit-tree-view--expand-on-tool-only
Applied when expandOnToolOnly=true.
zippy-react-toolkit-tree-view--rtl
Applied when rtl=true.
zippy-react-toolkit-tree-view---check-onClick
Applied when checkOnClick=true.
zippy-react-toolkit-tree-view----enable-hover-style
Applied when enableHoverStyle=true.
zippy-react-toolkit-tree-view__node
Applied on <TreeView /> node.
zippy-react-toolkit-tree-view__node--collapsed
Applied on <TreeView /> node when it is collapsed.
zippy-react-toolkit-tree-view__node--selected
Applied on <TreeView /> node when it is selected.
zippy-react-toolkit-tree-view__node--checked
Applied on <TreeView /> node when it is checked.
zippy-react-toolkit-tree-view__node--disabled
Applied on <TreeView /> node when it is disabled.
zippy-react-toolkit-tree-view__node--loading
Applied on <TreeView /> node when it is loading, see async page.
zippy-react-toolkit-tree-view__node--has-children
Applied on <TreeView /> node when it has node.nodes.
zippy-react-toolkit-tree-view__node--active
Applied on <TreeView /> node when it active.
zippy-react-toolkit-tree-view__node__label
Applied on node.label.
zippy-react-toolkit-tree-view__node__label__text
Applied on node.label text.
zippy-react-toolkit-tree-view__node__checkbox
Applied on checkbox.
zippy-react-toolkit-tree-view__node__checkbox
Applied on checkbox when checked.
zippy-react-toolkit-tree-view__content
Applied on wrapper around node.nodes.
zippy-react-toolkit-tree-view__node__expander
Applied on expandTool.
zippy-react-toolkit-tree-view__node__expander--collapsed
Applied on expandTool when node is collapsed.
zippy-react-toolkit-tree-view__node__loader
Applied on loadTool, see async nodes.
zippy-react-toolkit-tree-view__node__checkbox--checked
Applied on checkbox.
zippy-react-toolkit-tree-view__node__icon-img
Applied on node.icon, when it is a string.
zippy-react-toolkit-tree-view__tree-line__vertical
Applied on vertical tree line.
zippy-react-toolkit-tree-view__tree-line__horizontal
Applied on horizontal tree line.
zippy-react-toolkit-search-tree-view
Applied on <SearchTreeView />.
zippy-react-toolkit-search-tree-view__hightlight
Applied on substrings that match the searchText.
zippy-react-toolkit-search-tree-view__non_hightlight
Applied on substrings that don't match the searchText.
zippy-react-toolkit-search-tree-view__input
Applied on search input.