向react-sortable-tree添加自定义样式

可以通过以下步骤实现：

首先，确保你已经安装了react-sortable-tree和相关的依赖包。可以使用npm或者yarn进行安装。
在你的React组件中引入react-sortable-tree和相关的样式文件。

import React from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // 引入默认样式文件

创建一个自定义样式对象，用于覆盖默认样式。你可以根据自己的需求修改以下示例中的样式属性。

const customStyle = {
  tree: {
    backgroundColor: 'white',
    padding: '10px',
    borderRadius: '5px',
    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.15)',
  },
  node: {
    display: 'flex',
    alignItems: 'center',
    padding: '5px',
    borderRadius: '3px',
    marginBottom: '5px',
    backgroundColor: '#f0f0f0',
  },
  nodeContent: {
    marginLeft: '10px',
  },
};

在你的组件中使用react-sortable-tree，并传入自定义样式对象。

const MyTreeComponent = () => {
  return (
    <div style={customStyle.tree}>
      <SortableTree
        treeData={treeData}
        onChange={handleChange}
        generateNodeProps={generateNodeProps}
        style={customStyle.node}
        innerStyle={customStyle.nodeContent}
      />
    </div>
  );
};

在上述代码中，我们将自定义样式对象分别应用到了整个树的容器（tree）和每个节点（node）以及节点内容（nodeContent）上。