search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
520 stars 69 forks source link

Feature Request: styling for 1st-level items #81

Closed Nerevar123 closed 2 years ago

Nerevar123 commented 2 years ago

Feature request

Hi @minop1205, is it possible to add the ability to style the top-level list items?

For realisation like this:

image

minop1205 commented 2 years ago

@Nerevar123

Changing the style only for top-level items is possible by using the classes property or the depth option of render.

The classes property allows you to define the class name of the root ul, so for example, you can style only the items in the top-level hierarchy with the following selector

.rootList > li > div {
  color: #f00;
}

Click here for a sample. https://codesandbox.io/s/full-features-issue81-1-e7ysh

Also, since option is passed to the render callback function, you can use the depth parameter in it to know the depth of the node. So it is possible to assign a dedicated className for depth === 0 in a custom node.

Here is a sample https://codesandbox.io/s/full-features-issue81-2-ibjjp

Nerevar123 commented 2 years ago

thanks for the detailed answer, did not think about it