>source

Mui V5를 사용 중이고 TreeItem 레이블 구성 요소의 일부가 되어야 하고 오른쪽이 아닌 왼쪽에 나타나야 하기 때문에 축소/확장 아이콘이 포함되지 않도록 TreeView를 변경하고 싶습니다. 또한 TreeItem의 들여쓰기를 취소하고 싶습니다. 어떻게 할 수 있습니까?

  • 답변 # 1

    내 생각에 들여쓰기로 하려는 작업은 TreeView 또는 TreeItem 소품을 통해 직접 수행할 수 없습니다. 그냥 피하면 아이콘을 제거 할 수 있습니다기본 접기 아이콘그리고기본 확장 아이콘소품.

    언제든지 원하는 것을 달성하기 위해 몇 가지 사용자 정의 스타일을 추가할 수 있습니다. 다음은 아이콘이나 들여쓰기 없이 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에 적용된 사용자 정의 스타일은 아이콘에 할당된 공간을 제거합니다.

  • 답변 # 2

    내 생각에 들여쓰기로 하려는 작업은 TreeView 또는 TreeItem 소품을 통해 직접 수행할 수 없습니다. 그냥 피하면 아이콘을 제거 할 수 있습니다기본 접기 아이콘그리고기본 확장 아이콘소품.

    언제든지 원하는 것을 달성하기 위해 몇 가지 사용자 정의 스타일을 추가할 수 있습니다. 다음은 아이콘이나 들여쓰기 없이 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에 적용된 사용자 정의 스타일은 아이콘에 할당된 공간을 제거합니다.

  • 이전 Devexpress Winforms GridControl CellValueChanged 이벤트를 취소하는 방법은 무엇입니까?
  • 다음 .htaccess : htaccess로 인코딩된 URL을 리디렉션하는 데 도움이 필요합니다.