Mui V5 - 移除 TreeView collapse/extand 图标和 TreeItem 缩进

Question

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

Answer 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 的自定义样式删除了分配给图标的 space。

Here's a sandbox with an unintended TreeView

Mui V5 - 移除 TreeView collapse/extand 图标和 TreeItem 缩进

Mui V5 - Remove TreeView collapse/extand icons and TreeItem indentation

javascript

css

reactjs

material-ui

treeview