如何实现MUI X TreeView展开TreeItem时显示标签下方文本

核心思路 #

利用TreeItem无头API提供的status.expanded状态控制文本的条件渲染，同时调整布局确保文本显示在标签下方，且不干扰子TreeItem的展示。

解决方案一：文本嵌入内容块内（推荐） #

将文本与头像、标签放在同一个垂直布局容器中，通过status.expanded控制显示，样式对齐更自然：

<TreeItem2Provider itemId={itemId}>
  <TreeItem2Root {...getRootProps(other)}>
    <CustomTreeItemContent {...getContentProps()}>
      <TreeItem2IconContainer {...getIconContainerProps()}>
        <TreeItem2Icon status={status} />
      </TreeItem2IconContainer>
      {/* 改为垂直布局容器，包含头像+标签组和展开文本 */}
      <Box sx={{ flexGrow: 1, display: "flex", flexDirection: "column", gap: 1 }}>
        {/* 原有头像+标签的横向布局 */}
        <Box sx={{ display: "flex", gap: 1 }}>
          <Avatar
            sx={(theme) => ({
              background: theme.palette.primary.main,
              width: 24,
              height: 24,
              fontSize: "0.8rem",
            })}
          >
            {(label as string)[0]}
          </Avatar>
          <TreeItem2Label {...getLabelProps()} />
        </Box>
        {/* 仅展开时显示文本，调整margin对齐标签 */}
        {status.expanded && (
          <Box sx={{ marginLeft: "32px", fontSize: "0.875rem", color: "text.secondary" }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit
          </Box>
        )}
      </Box>
    </CustomTreeItemContent>
    {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
  </TreeItem2Root>
</TreeItem2Provider>

解决方案二：文本作为根节点子元素 #

如果需要文本与子TreeItem同级，可将文本放在CustomTreeItemContent外部，手动调整缩进对齐：

<TreeItem2Provider itemId={itemId}>
  <TreeItem2Root {...getRootProps(other)}>
    <CustomTreeItemContent {...getContentProps()}>
      <TreeItem2IconContainer {...getIconContainerProps()}>
        <TreeItem2Icon status={status} />
      </TreeItem2IconContainer>
      <Box sx={{ flexGrow: 1, display: "flex", gap: 1 }}>
        <Avatar
          sx={(theme) => ({
            background: theme.palette.primary.main,
            width: 24,
            height: 24,
            fontSize: "0.8rem",
          })}
        >
          {(label as string)[0]}
        </Avatar>
        <TreeItem2Label {...getLabelProps()} />
      </Box>
    </CustomTreeItemContent>
    {/* 仅展开时显示，paddingLeft对齐图标+头像宽度 */}
    {status.expanded && (
      <Box sx={{ paddingLeft: "48px", fontSize: "0.875rem", color: "text.secondary" }}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
      </Box>
    )}
    {children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
  </TreeItem2Root>
</TreeItem2Provider>

关键说明 #

1. 状态控制：status.expanded是TreeItem无头API提供的内置状态，直接用来判断当前节点是否展开，解决“始终显示”的问题。
2. 布局调整：通过flexDirection: "column"将内容改为垂直排列，确保文本在标签下方，解决“显示在右侧”的问题。
3. 避免错误嵌套：不要将文本放入TreeItem2GroupTransition内，该组件专门用于包裹子TreeItem，放入会覆盖原有子节点，解决“替换子TreeItem”的问题。

内容的提问来源于stack exchange，提问作者user358041