Customizing styles

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…

[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 ?

[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.