How to fill background color of a node

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.

[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;
}

[Punith13]

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