如何在Material UI（React）的TreeItem中添加图片？

Material UI的TreeView官方示例中主要使用SVG图标，你可以通过以下两种方式自定义SVG图标：

自定义SvgIcon组件 #

封装专属的SVG图标组件，通过TreeItem的icon属性传入：

function MyIcon(props) {
  return (
    <SvgIcon {...props}>
      <svg ...>
        <path d="..."/>
        ...
      </svg>
    </SvgIcon>
  );
}

<TreeView>
  <TreeItem nodeId="1" label="我的节点" icon={<MyIcon />}/>        
</TreeView>

实现StyledTreeItem组件 #

自定义StyledTreeItem，在label区域嵌入图标元素：

function StyledTreeItem(props) {
  return (
    <StyledTreeItemRoot
      label={
        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>  
          <Box component={props.myIcon} color="inherit" sx={{ mr: 1 }} />            
          {props.labelText}
        </Box>
      }
      {...props}
    />
  );
}

加载JPG/BMP/PNG格式的图片 #

要在TreeItem中使用非SVG格式的图片，只需用Avatar组件或原生<img>标签替代SVG图标即可，以下是两种可行方案：

方案1：通过TreeItem的icon属性传入 #

使用Avatar组件可以便捷控制图片尺寸，适配TreeItem布局：

<TreeView>
  <TreeItem 
    nodeId="2" 
    label="带图片的节点" 
    icon={
      <Avatar 
        src="/你的图片路径/image.png" 
        sx={{ width: 24, height: 24 }} 
      />
    }
  />        
</TreeView>

也可以直接使用原生<img>标签：

<TreeItem 
  nodeId="2" 
  label="带图片的节点" 
  icon={
    <img 
      src="/你的图片路径/image.jpg" 
      style={{ width: 24, height: 24, objectFit: 'cover' }} 
      alt="节点图标"
    />
  }
/>

方案2：在StyledTreeItem的label中嵌入图片 #

如果使用自定义StyledTreeItem，直接在label的容器中替换为图片元素：

function StyledTreeItem(props) {
  return (
    <StyledTreeItemRoot
      label={
        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>  
          <Avatar 
            src={props.imageSrc} 
            sx={{ width: 24, height: 24, mr: 1 }} 
          />
          {props.labelText}
        </Box>
      }
      {...props}
    />
  );
}

// 使用示例
<StyledTreeItem 
  nodeId="3" 
  labelText="自定义带图节点" 
  imageSrc="/你的图片路径/image.bmp" 
/>

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