将自定义样式添加到 react-sortable-tree答案

【问题标题】：add custom style to react-sortable-tree将自定义样式添加到 react-sortable-tree
【发布时间】：2021-09-25 09:34:47
【问题描述】：

我正在使用带有 typescript 和 react-sortable-tree-theme-minimal 的 react-sortable-tree 库，我得到了这个结果

我需要像这样在箭头和标题之间留一个小空间

看Tokyo and Jászárokszállás之间的防守我添加带有样式代码的.less 文件

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

并将其导入我的组件import '../view/LayoutDepartmentSettings/Style.less';

将它与树一起使用

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

但样式没有改变，树也没有受到影响。请告诉我我的错误在哪里

【问题讨论】：

标签： reactjs react-sortable-hoc

【解决方案1】：

感谢您的帮助，我通过将css loader 添加到webpack.config 文件解决了这个问题

【讨论】：

【解决方案2】：

在您的组件中添加对您有帮助的样式。

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

【讨论】：

我确实尝试过，但空间没有应用太糟糕的问题
marginLeft 影响整个树...我希望它只影响文本
在你的列表元素标签中提供marginleft

感谢您的帮助，我通过在 webpack.config 文件中添加 css 加载器解决了这个问题