MUI v5 Tree组件：如何取消首个项的折叠事件并移除下拉图标

1. 移除第一个树形项的下拉图标 #

通过MUI的sx属性直接针对第一个TreeItem的展开图标容器设置隐藏，还可调整内边距让它更贴合普通列表项的视觉效果：

<TreeItem
  nodeId="1"
  label="ALL"
  sx={{
    '&:first-of-type .MuiTreeItem-iconContainer': {
      display: 'none',
    },
    '&:first-of-type .MuiTreeItem-content': {
      paddingLeft: '16px', // 和普通列表项的缩进对齐
    }
  }}
>
  {/* 子项内容 */}
</TreeItem>

2. 取消第一个树形项的折叠/展开事件 #

在Tree组件的onExpand和onCollapse事件回调中，通过nodeId判断当前操作的是目标项，直接阻止默认行为即可：

const handleExpand = (event, nodeId) => {
  if (nodeId === '1') {
    event.preventDefault();
    return;
  }
  // 其他项的展开逻辑（如果需要）
};

const handleCollapse = (event, nodeId) => {
  if (nodeId === '1') {
    event.preventDefault();
    return;
  }
  // 其他项的折叠逻辑（如果需要）
};

完整可运行示例 #

import * as React from 'react';
import Tree from '@mui/lab/Tree';
import TreeItem from '@mui/lab/TreeItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

export default function CustomTree() {
  const handleExpand = (event, nodeId) => {
    if (nodeId === '1') {
      event.preventDefault();
      return;
    }
  };

  const handleCollapse = (event, nodeId) => {
    if (nodeId === '1') {
      event.preventDefault();
      return;
    }
  };

  return (
    <Tree
      onExpand={handleExpand}
      onCollapse={handleCollapse}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem
        nodeId="1"
        label="ALL"
        sx={{
          '&:first-of-type .MuiTreeItem-iconContainer': {
            display: 'none',
          },
          '&:first-of-type .MuiTreeItem-content': {
            paddingLeft: '16px',
          },
        }}
      >
        <TreeItem nodeId="2" label="Item 1" />
        <TreeItem nodeId="3" label="Item 2" />
      </TreeItem>
      <TreeItem nodeId="4" label="Other Category">
        <TreeItem nodeId="5" label="Sub Item" />
      </TreeItem>
    </Tree>
  );
}

关键说明 #

• 样式上通过:first-of-type选择器精准定位第一个TreeItem，避免影响其他项的样式；
• 事件处理中利用nodeId作为判断标识，调用event.preventDefault()直接阻断默认的折叠/展开行为，确保首项始终保持展开状态且无法触发折叠操作。

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