Styling Customizability
You can change how the rendered tree looks like by providing custom CSS rules or changing CSS variables to customize its looks.
info
The default styles are declared here.
You can further customize how the tree looks like by providing custom render hooks to provide logic for rendering the individual DOM nodes. This customizability is further documented in the Render Hook Guide.
CSS Variables​
The following CSS variables are used by React Complex Tree and can be customized by replacing individual values:
:root {
--rct-color-tree-bg: #f6f8fa;
--rct-color-tree-focus-outline: #0366d6;
--rct-color-focustree-item-selected-bg: #e8eaed;
--rct-color-focustree-item-selected-text: inherit;
--rct-color-focustree-item-focused-border: #0366d6;
--rct-color-focustree-item-draggingover-bg: #ebf0f4;
--rct-color-focustree-item-draggingover-color: inherit;
--rct-color-nonfocustree-item-selected-bg: #e8eaed;
--rct-color-nonfocustree-item-selected-text: inherit;
--rct-color-nonfocustree-item-focused-border: #dbdbdb;
--rct-color-search-highlight-bg: #a2aed2;
--rct-color-drag-between-line-bg: #0366d6;
--rct-color-arrow: #9aa5b3;
--rct-item-height: 22px;
--rct-color-renaming-input-submitbutton-bg: inherit;
--rct-color-renaming-input-submitbutton-bg-hover: #0366d6;
--rct-color-renaming-input-submitbutton-bg-active: #095fc1;
--rct-color-renaming-input-submitbutton-text: inherit;
--rct-color-renaming-input-submitbutton-text-hover: #ffffff;
--rct-color-renaming-input-submitbutton-text-active: #ffffff;
}
note
This may not reflect the current possibilities. Look into the CSS source file to see all available variables.
Example​
CSS Class Names​
info
The default render logic is declared here. Look into that file to see which classes are used where exactly.
The following classes are defined by the default renderers and attached to DOM nodes if the respective conditions are met:
Tree Container​
rct-tree-root
rct-tree-root-focus
rct-tree-root-renaming
rct-tree-root-itemsselected
Tree Items​
rct-tree-item-search-highlight
rct-tree-item-arrow
rct-tree-item-arrow-hasChildren
rct-tree-item-li
rct-tree-item-li-hasChildren
rct-tree-item-li-selected
rct-tree-item-li-expanded
rct-tree-item-li-focused
rct-tree-item-li-dragging-over
rct-tree-item-li-search-match
rct-tree-item-title-container
rct-tree-item-button
Tree Item Renaming Form​
rct-tree-item-renaming-form
rct-tree-item-renaming-input
rct-tree-item-renaming-submit-button
Container for Tree Items​
rct-tree-items-container
Drag-Between Line​
rct-tree-drag-between-line
rct-tree-drag-between-line-top
rct-tree-drag-between-line-bottom
Search Input​
rct-tree-search-input-container
rct-tree-search-input
note
This may not reflect the current possibilities. Look into the JS source file to see all available classes.