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: #373a3f;

  --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;
}

If you are using the modern styles (i.e. importing style-modern.css instead of style.css), you have additional possibilities:

:root {
  --rct-color-tree-bg: transparent;
  --rct-item-height: 28px;
  --rct-color-search-highlight-bg: #acccf1;

  --rct-color-tree-focus-outline: transparent;
  --rct-item-margin: 1px;
  --rct-item-padding: 8px;
  --rct-radius: 4px;
  --rct-bar-offset: 6px;
  --rct-bar-width: 4px;
  --rct-bar-color: #0366d6;
  --rct-focus-outline: #000000;

  --rct-color-focustree-item-selected-bg: #f0f2f5;
  --rct-color-focustree-item-hover-bg: #f0f2f5;
  --rct-color-focustree-item-hover-text: inherit;
  --rct-color-focustree-item-active-bg: #e4e6eb;
  --rct-color-focustree-item-active-text: #4f4f4f;

  --rct-arrow-size: 10px;
  --rct-arrow-container-size: 16px;
  --rct-arrow-padding: 6px;

  --rct-cursor: pointer;

  --rct-search-width: 120px;
  --rct-search-height: 16px;
  --rct-search-padding: 8px;
  --rct-search-border: #b4b7bd;
  --rct-search-border-bottom: #0366d6;
  --rct-search-bg: #f8f9fa;
  --rct-search-text: #000000;
  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
}

note

This may not reflect the current possibilities. Look into the source file for the default styles or the source file for the modern styles to see all available variables.

Example

Live Editor

function App() { return ( <> <style>{` :root { --rct-color-tree-bg: #F6F8FA; --rct-color-tree-focus-outline: #d60303; --rct-color-focustree-item-selected-bg: #e2d3d3; --rct-color-focustree-item-focused-border: #d60303; --rct-color-focustree-item-draggingover-bg: #ecdede; --rct-color-focustree-item-draggingover-color: inherit; --rct-color-search-highlight-bg: #7821e2; --rct-color-drag-between-line-bg: #cf03d6; --rct-color-arrow: #b48689; --rct-item-height: 30px; } `}</style> <UncontrolledTreeEnvironment canDragAndDrop={true} canDropOnFolder={true} canReorderItems={true} dataProvider={new StaticTreeDataProvider(longTree.items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={{ ['tree-1']: { focusedItem: 'Meals' } }} > <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" /> </UncontrolledTreeEnvironment> </> ); }

function App() {
  return (
    <>
      <style>{`
        :root {
          --rct-color-tree-bg: #F6F8FA;
          --rct-color-tree-focus-outline: #d60303;
          --rct-color-focustree-item-selected-bg: #e2d3d3;
          --rct-color-focustree-item-focused-border: #d60303;
          --rct-color-focustree-item-draggingover-bg: #ecdede;
          --rct-color-focustree-item-draggingover-color: inherit;
          --rct-color-search-highlight-bg: #7821e2;
          --rct-color-drag-between-line-bg: #cf03d6;
          --rct-color-arrow: #b48689;
          --rct-item-height: 30px;
        }
      `}</style>
      <UncontrolledTreeEnvironment
        canDragAndDrop={true}
        canDropOnFolder={true}
        canReorderItems={true}
        dataProvider={new StaticTreeDataProvider(longTree.items, (item, data) => ({ ...item, data }))}
        getItemTitle={item => item.data}
        viewState={{ ['tree-1']: { focusedItem: 'Meals' } }}
      >
        <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
      </UncontrolledTreeEnvironment>
    </>
  );
}

Result

Loading...

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-isFolder
• rct-tree-item-li
• rct-tree-item-li-isFolder
• 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.