Material ui 材料ui树视图（来自实验室）与第三个和第二个不正确对齐；子节点

---

查看上面的material ui示例-如果将Category.Social.TestNode添加到数据中，则TestNode子节点在其父社交节点下的位置不正确。它应该移到右侧，即显示为子对象。因为这仍然是实验室不太担心，但想知道在哪里修复它。

我检查了您的代码并找到了一种解决方案（）

基本上，我传递了一个depth css属性（

--node depth

），该属性用于计算元素必须有多少填充空间

paddingLeft:`calc（var（--node depth）*${theme.spating（2）}px`

深度设置在

StyledTreeItem

中，我迭代每个子元素，将深度作为属性传递给嵌套元素（默认情况下depht为0）：

我希望这有帮助

React.Children.map(children, (child, index) => {
  return React.cloneElement(child, { depth: depth + 1 });
})