How can I target a particular branch or layer within the React Checkbox Tree and add a scrollbar and search input field to a specific layer?

[sunday-ucheawaji]

I have a UI tree created with Checkbox Tree ("react-checkbox-tree": "1.5.1") . I want to be able to style any branch or layer within the tree to my taste using css, such as puting a scrollbar in the next layer which is not the root, also I want to place an input field for search. However I don't know how to go about it. Basically, I want to have the flexibility of styling any layer to my taste.

this is how my state look like

[
{
value: "All",
label: "All",
children: [
{
value: "consultations",
label: "Consultations",
children: [
{value: "ab", label: "AB"},
{value: "ac", label: "AC"},
{value: "ad", label: "AD"},
children:[
{value: "ab", label: "AB"},
{value: "ac", label: "AC"},
{value: "ad", label: "AD"},
],
},
],
},
{
value: "investigation",
label: "Investigation",

    },
    {
      value: "medication",
      label: "Medication",
 
    },
  ],
},

];
I want to be able to add a scrollbar in each of the children array in the three. this how my Ui look like

), uncheck: (

), halfCheck: (

), expandClose: (

), expandOpen: (

), expandAll: null, collapseAll: null, parentClose: null, parentOpen: null, leaf: null, }} /> I tried inspecting the element from the browser and using the class names to overide the style but there is so much little I can do. so many elements have the same class names and there seem to be no unique way of identifying each element and styling it.

[jakezatecky]

Although not elegant, you can technically target each level by chaining the classes together:

/* Second level */
.rct-node .rct-node {
  color: #ff0;
}

/* Third level */
.rct-node .rct-node .rct-node {
  color: #f0f;
}

Obviously, this becomes unwieldy the more nested the tree becomes.

Although not present in the current version, we can probably add support for node-level styling on the property level as well as specifying the level via a CSS class or data attribute such that styling is easier in the future.

[sunday-ucheawaji]

Thanks a lot

…

On Fri, Jun 9, 2023 at 6:38 PM Jake Zatecky ***@***.***> wrote: Although not elegant, you can technically target each level by chaining the classes together: /* Second level */ .rct-node .rct-node { color: #ff0; } /* Third level */ .rct-node .rct-node .rct-node { color: #f0f; } Obviously, this becomes unwieldy the more nested the tree becomes. Although not present in the current version, we can probably add support for node-level styling on the property level as well as specifying the level via a CSS class or data attribute such that styling is easier in the future. — Reply to this email directly, view it on GitHub <#428 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOT6UZNI7FJX4IEDY2KDL33XKNNRPANCNFSM6AAAAAAY6A6RHI> . You are receiving this because you authored the thread.Message ID: <jakezatecky/react-checkbox-tree/repo-discussions/428/comments/6135461@ github.com>