add custom style to react-sortable-tree

Question

I'm using react-sortable-tree library with typescript and react-sortable-tree-theme-minimal and I got this result

I need to make a small space between the arrow and the title like this

See the defense between Tokyo and Jászárokszállás I add .less file with styling code

.rstcustom__rowTitle {
    margin-left: 1% !important;
    font-weight: lighter !important;
    color: red !important;
}

and import it into my component import '../view/LayoutDepartmentSettings/Style.less';

and use it with the tree

                <SortableTree
                    rowHeight={50}
                    treeData={this.state.treeData}
                    onChange={this.updateTreeData}
                    canDrag={false}
                    className={"rstcustom__rowTitle"}
.......

but the style doesn't change and the tree didn't affected. please tell me where is my error

Answer 1

Thanks for helping me, I solved the issue by adding css loader to webpack.config file

Answer 2

Add style inside your component that will help you.

<SortableTree
 rowHeight={50}
 treeData={this.state.treeData}
 onChange={this.updateTreeData}
 canDrag={false}
 className={"tree"}
 style={{marginLeft:3,fontWeight:"lighter",color:"red"}}
                     
/>```