Mui V5 - 删除 TreeView 折叠/扩展图标和 TreeItem 缩进答案

【问题标题】：Mui V5 - Remove TreeView collapse/extand icons and TreeItem indentationMui V5 - 删除 TreeView 折叠/扩展图标和 TreeItem 缩进
【发布时间】：2022-02-03 17:39:24
【问题描述】：

我正在使用 Mui V5 并希望更改 TreeView，使其不包含折叠/扩展图标，因为我需要它们成为 TreeItem 标签组件的一部分并出现在左侧，而不是右侧。另外，我想取消 TreeItems 的缩进。我该怎么做？

【问题讨论】：

标签： javascript css reactjs material-ui treeview

【解决方案1】：

我认为你试图用缩进做的事情不能直接通过 TreeView 或 TreeItem 道具来完成。您可以删除图标，只是避开 defaultCollapseIcon 和 defaultExpandIcon 道具。

您始终可以添加一些自定义样式来实现您想要的效果。这是一个只获取没有图标或缩进的 TreeView 的示例。

const StyledTreeView = styled(TreeView)`
  .MuiTreeItem-group {
    margin-left: 0;
  }
`;

const StyledTreeItem = styled(TreeItem)`
  .MuiTreeItem-iconContainer {
    display: none;
  }
`;

export default function App() {
  return (
    <StyledTreeView aria-label="tree">
      <StyledTreeItem nodeId="1" label="Item 1">
        <StyledTreeItem nodeId="2" label="Subitem 1-1" />
      </StyledTreeItem>
      <StyledTreeItem nodeId="5" label="Item 2">
        <StyledTreeItem nodeId="10" label="Subitem 2-1" />
        <StyledTreeItem nodeId="6" label="Subitem 2-2">
          <StyledTreeItem nodeId="8" label="Subitem 2-2-1" />
        </StyledTreeItem>
      </StyledTreeItem>
    </StyledTreeView>
  );
}

应用于 TreeView 的自定义样式会移除缩进，应用于 StyledTreeItem 的自定义样式会移除分配给图标的空间。

Here's a sandbox with an unintended TreeView

【讨论】：