Estoy usando Mui V5 y quiero cambiar TreeView para que no incluya iconos de colapsar/extender, ya que necesito que formen parte del componente de etiqueta TreeItem y que aparezcan a la izquierda, no a la derecha. Además, quiero cancelar la sangría de TreeItems. ¿Cómo puedo hacer eso?
Creo que lo que está tratando de hacer con la sangría no se puede hacer directamente a través de los accesorios TreeView o TreeItem. Puede eliminar iconos simplemente evitando defaultCollapseIcon y defaultExpandIcon .
Siempre puede agregar un estilo personalizado para lograr lo que desea. Aquí hay un ejemplo para obtener un TreeView sin íconos ni sangría.
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> ); }El estilo personalizado aplicado a TreeView elimina la sangría y el aplicado a StyledTreeItem elimina el espacio asignado a un icono.