ReactJS中如何在Material UI的TreeView组件添加endIcon尾缀图标？

这个需求完全可以实现，失效的原因是你使用的自定义StyledTreeItem组件，没有将endIcon属性透传到内部的渲染逻辑中，按以下步骤修改即可：

• 第一步：在StyledTreeItem的props中新增endIcon接收，确保外层传入的属性不会被忽略

你用的默认自定义组件逻辑仅处理了原生TreeItem的基础属性，没有新增对endIcon的接收和渲染逻辑，因此外层传值不会生效

• 第二步：修改自定义标签渲染函数，将endIcon插入到标签文本末尾
  以下是修改后的StyledTreeItem核心代码示例：

const StyledTreeItem = (props) => {
  // 解构接收endIcon属性
  const { label, endIcon, ...restProps } = props;

  // 自定义标签渲染逻辑，追加endIcon展示
  const renderLabel = (
    <Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
      {label}
      {/* 存在endIcon时才渲染 */}
      {endIcon ?? null}
    </Box>
  );

  return <TreeItem label={renderLabel} {...restProps} />;
};

• 第三步：外层调用时保持JSX格式的传参写法即可生效：

// 正确写法：传入实例化的JSX图标元素
<StyledTreeItem endIcon={<ArrowDropDownIcon />} label="节点文本" />

// 错误写法：不要直接传入组件引用
// <StyledTreeItem endIcon={ArrowDropDownIcon} label="节点文本" />

补充说明 #

如果你的StyledTreeItem是通过MUI的styledAPI生成的样式包裹组件，只需保证属性透传没有被额外过滤，无需对组件包裹逻辑做修改，仅调整上述的标签渲染逻辑即可。

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