How to fill background color of a node

[bfang711]

I would like to fill node background with another color other than white, however seems like not able to. Here is what I did.

<SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
	    canDrag = {false}
	    getNodeKey = {({node})=> node.id}
            generateNodeProps={(({ node, path, treeIndex}) => {
		return ({
		    title: (
			<div style={{height:'100%', width:'100%', backgroundColor:'cyan'}} >
                        <Checkbox
			      label= {node.name}
			    />
                        </div>),})}}
/>

and this is how it looks. (I want color fill all the node background)

Please let me know how to resolve it.

thank you so much.

[wuweiweiwu]

you can generate a style prop. It isn't working right now because you are putting it in the title

ex:

return {
    title: //whatever u have here
    style: //whatever style u want
}

hope that helps!

[davidgolden]

Can you provide an example for what that style prop might look like?

[wuweiweiwu]

@davidgolden the style prop would look something like this { backgroundColor: 'black' }. The standard react css in js -> https://reactjs.org/docs/faq-styling.html

Hope that helps!

[mtrsklnkvMM]

It does not seem to work with backgroundColor using generateNodeProps, is there any way to programatically set the background color of the entire node?

[ut2k]

Hi, I was having the same problem, and setting backgroundColor to black doesn't seem to work. Any suggestions, on how to style this react sortable trees?

[Punith13]

Hi, I am having the same issue, using background / backgroundColor doesn't have any effect.

[asilberschneider]

Hi, the reason behind that is that props returned from generateNodeProps are applied to the whole node "row" container, and not the node contents.
If you look closely, you may notice that the background color applied via the style prop is "shining through" at the rounded edges of the drag handle and the node contents rectangles (only).

You could work around this by either creating a custom nodeContentRenderer (see node-renderer-default.js for the default renderer), or by defining CSS classes which target the node content element.

Example for the latter:

JSX prop
generateNodeProps={ () => ({ className: 'red-node' }) }

CSS class

.red-node .rst__rowContents {
  background-color: red;
}