Open AnirudhVyas opened 7 years ago
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.
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.
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 ?
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?
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;
}
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!
@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!
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...