如何修复React MUI自定义TreeView项内部间距失效问题？

问题根源在于默认TreeItem的布局限制：标签容器未占据足够宽度，导致justifyContent: space-between无法生效；同时默认结构未区分箭头与标签区域的空间分配。按以下步骤修改即可实现需求：

1. 调整TreeItem整体布局 #

让TreeItem内容区域占满宽度，箭头固定在右侧，标签容器占据剩余所有空间：

const CustomTreeItem = forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const item = useTreeItemModel<CustomLabelProps>(props.itemId);

  if (!item) {
    return null
  }

  return (
    <TreeItem
      {...props}
      ref={ref}
      slots={{
        label: CustomLabel,
      }}
      slotProps={{
        label: { isInternal: item.isInternal } as CustomLabelProps,
      }}
      sx={{
        // 让TreeItem内容区域占满宽度，箭头固定在右侧
        '& .MuiTreeItem-content': {
          display: 'flex',
          justifyContent: 'space-between',
          width: '100%',
        },
        // 让标签容器占据箭头以外的全部空间
        '& .MuiTreeItem-labelContainer': {
          flex: 1,
        },
      }}
    />
  );
});

2. 优化CustomLabel内部布局 #

确保外层容器占满宽度，中间标签文字居中：

function CustomLabel({ children, className, isInternal }: CustomLabelProps) {
  return (
    <div className={className} sx={{ width: '100%' }}>
        <Box
            sx={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%",
            }}
        >
            {isInternal && <span>left content goes here</span>}
            {/* 让标签文字居中，同时填充中间空间 */}
            <Typography sx={{ flex: 1, textAlign: 'center' }}>{children}</Typography>
            <span>right content goes here</span>
        </Box>
    </div>
  );
}

最终效果 #

• 箭头图标固定在TreeItem最右侧
• 左侧内容仅在isInternal为true时显示，位于标签左侧
• 标签文字居中展示
• 右侧内容固定在标签右侧
• space-between自动分配左右内容与中间标签的间距

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