[英]Mui V5 - Remove TreeView collapse/extand icons and TreeItem indentation
I'm using Mui V5 and want to change TreeView so it doesnt include collapse/extand icons since I need them to be a part of the TreeItem label component and appear on the left, not right.我正在使用 Mui V5 并想更改 TreeView 所以它不包括折叠/扩展图标,因为我需要它们成为 TreeItem label 组件的一部分并出现在左侧,而不是右侧。 Also, I want to cancel the indentation of the TreeItems.另外,我想取消 TreeItems 的缩进。 how can I do that?我怎样才能做到这一点?
I think that what you are trying to do with indentation cannot be directly done through TreeView or TreeItem props.我认为你试图用缩进做的事情不能直接通过 TreeView 或 TreeItem 道具来完成。 You can remove icons just avoiding defaultCollapseIcon
and defaultExpandIcon
props.您可以删除图标,只是避免defaultCollapseIcon
和defaultExpandIcon
道具。
You can always add some custom styling to achieve what you want.您始终可以添加一些自定义样式来实现您想要的。 Here's an example to just get a TreeView without icons nor indentation.这是一个示例,仅获取没有图标或缩进的 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>
);
}
The custom style applied to TreeView removes the indentation, and the one applied to StyledTreeItem removes the space assigned to an icon.应用于 TreeView 的自定义样式删除了缩进,应用于 StyledTreeItem 的自定义样式删除了分配给图标的空间。
Here's a sandbox with an unintended TreeView 这是一个带有意外 TreeView 的沙箱
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.