React-sortable-tree: Customizing styles

[AnirudhVyas]

I am trying to ascertain as to how can I roundify tree nodes and control their opacity and add some of the gradients styles - but i fail to see it happening : its not very customizable - I changed node-renderer-default.scss to have following - rowContents { @extend %rowItem; position: relative; height: 100%; border: solid #BBB 1px; border-left: none; box-shadow: 0 2px 2px -2px; padding: 0 5px 0 10px; border-radius: 2px; min-width: 230px; flex: 1 0 auto; display: flex; align-items: center; justify-content: space-between; background-color: white; border-bottom-right-radius:15px; border-top-right-radius:15px }

But this is just me - I have forked to customize, but I would like to know if there's already an option to provide style parameters to the tree other than node-renderer - thanks.

PS - I began learning react just a few weeks back so pardon my obvious ignorance...

[rrousselGit]

There's style, className, and innerStyle available. Which is enough.
I customized mine so that className disabled remove the dragHandle.

Don't forget that there's priority in CSS.
rowContents {
}
is not "strong" enough.

Use div.rowContents {
}
to override the default css of react-sortable-tree.

[AaronHarris]

Here is perhaps an easier question: I have a pretty easy style change; I only want to change the rowWrapper padding amount (in sass it is defined in $row-padding: 10px;). Is there a way this could be done without having to fork the entire project? It's more important to me than rowHeight, and that's it's listed as a top-level prop.

[TheBlusky]

Same issue here. I just need to reduce the width of each row. And it seems really painful. I got a project generated with "create-react-app", and so scss, so there's a lot a things to add to my project to make it work.

Any workaround to override styling ?

[shalinigr]

I need to change the style for each node - when hovered and when selected. I managed to get the parent Node and it's siblings and I need to change their styling accordingly.
I see style:{} that can be used and I tried setting it in generatenodeprops() but to no avail. Could @rrousselGit shed some light on this as to how you used the style, innerstyle and classname?

[dennisgove]

I've done the following to edit the background and borders for each node. Perhaps it'll help you get what you need.

First, I implemented generateNodeProperties because I want to set different styles based on some data I store on the node.

generateNodeProperties(obj){
  console.dir(obj)

  var styleClasses = ["resource_node"]
  if(this.isSolrCloud(obj.node.fullPath)){
    styleClasses.push("resource_node_solr_cloud")
  }
  if(this.isSolrCollection(obj.node.fullPath)){
    styleClasses.push("resource_node_solr_collection")
  }
  if(this.isZookeeper(obj.node.fullPath)){
    styleClasses.push("resource_node_zookeeper")
  }
  if(this.props.policies.resourceList[obj.node.fullPath]){
    styleClasses.push("resource_node_has_policy")
  }
  if(obj.node.fullPath == this.props.selectedPath){
    styleClasses.push("resource_node_selected")
  }

  return {
    className: styleClasses.join(" ")
  }
}

Then in my css file I have the following

.resource_node .rst__rowContents{
  background-color: #303030;
  border-style: dashed;
  border-color: gainsboro;
}

.resource_node_selected .rst__rowContents {
  background-color: #616161;
}

.resource_node_solr_cloud .rst__rowContents{
  border-color: #fda100;
}
.resource_node_solr_collection .rst__rowContents{
  border-color: #f74ffb;
}

.resource_node_zookeeper .rst__rowContents{
  border-color: #57fbe9;
}

.resource_node_has_policy .rst__rowContents{
  border-style: solid;
}

[fritz-c]

The library has been updated in v2.0.0 to not use style-loader any more, instead requiring you to import the styles yourself. This should allow you to override the styles easily yourself, by creating a modified version of the style.css file. Check it out!

[Trinakriae]

@fritz-c I updated the library but still I cannot customized the height of the nodes since it is hardcoded. Is the new package already available in npm? Thanks!