reactjsreact-sortable-hoc

add custom style to react-sortable-tree


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

I need to make a small space between the arrow and the title like this enter image description here

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


Solution

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