如何为MUI-X RichTreeView的单个行设置自定义背景色？

你的问题核心是同时使用了items属性和手动渲染子组件——当RichTreeView接收到items参数时，会自动根据数据生成所有树节点，此时你在组件内部手动写的treeData.map(...)会被完全忽略，所以自定义的<span>不会出现在最终HTML里。

下面提供两种可行的解决方式：

方式一：使用renderItem自定义节点（推荐） #

这是RichTreeView官方推荐的自定义节点渲染方式，无需手动递归生成节点，直接利用组件提供的renderItem属性：

1. 定义节点渲染函数

const renderItem = (props) => {
  // 解构出当前节点数据、默认标签和其他属性
  const { item, label, ...restProps } = props;
  return (
    <CustomTreeItem
      {...restProps}
      label={
        // 用带背景色的span包裹标签文本
        <span style={{ backgroundColor: item.color, padding: "4px 8px", display: "block" }}>
          {label}
        </span>
      }
    />
  );
};

2. 调用RichTreeView

<RichTreeView items={treeData} renderItem={renderItem} />

说明：

• renderItem会为每个树节点自动调用，props.item就是你传入的包含color字段的节点数据
• 给span加display: block可以让背景色铺满整行，否则只会覆盖文本区域

方式二：完全手动渲染（不使用items属性） #

如果你坚持手动递归生成节点，需要移除items属性，让RichTreeView使用你手动传入的子节点：

1. 保留你的renderTree函数（注意修正重复的id，React要求key唯一）

const renderTree = (node) => {
  return (
    <CustomTreeItem
      key={node.id}
      nodeId={node.id}
      label={
        <span style={{ backgroundColor: node.color, padding: "4px 8px", display: "block" }}>
          {node.label}
        </span>
      }
    >
      {node.children?.map(childNode => renderTree(childNode))}
    </CustomTreeItem>
  );
};

2. 调用RichTreeView时移除items参数

<RichTreeView>
  {treeData.map(rootNode => renderTree(rootNode))}
</RichTreeView>

注意：你的示例数据中有两个节点id都是R21，会导致React key冲突和TreeView功能异常，必须确保每个节点的id唯一。

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