可以通过以下步骤实现:
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',
},
};
const MyTreeComponent = () => {
return (
<div style={customStyle.tree}>
<SortableTree
treeData={treeData}
onChange={handleChange}
generateNodeProps={generateNodeProps}
style={customStyle.node}
innerStyle={customStyle.nodeContent}
/>
</div>
);
};
在上述代码中,我们将自定义样式对象分别应用到了整个树的容器(tree)和每个节点(node)以及节点内容(nodeContent)上。
这样,你就成功地向react-sortable-tree添加了自定义样式。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云