如何自定义设置MUI TreeItem组件的标签样式？

实现方案 #

你要的仅给TreeItem标签部分加边框的需求，有两种常用实现方式： #

方案1：自定义label插槽内容（需要手动包裹div时优先用）

直接把TreeItem的label属性替换为你自定义的带边框div包裹的内容，代码示例：

import TreeItem from '@mui/lab/TreeItem';

// 自定义带边框的标签组件
const BorderedTreeLabel = ({ children }) => (
  <div style={{
    border: '1px solid #1976d2',
    borderRadius: 4,
    padding: '2px 8px',
    width: 'fit-content'
  }}>
    {children}
  </div>
);

// 业务中使用时直接传入自定义label即可
<TreeView>
  <TreeItem nodeId="1" label={<BorderedTreeLabel>一级节点</BorderedTreeLabel>}>
    <TreeItem nodeId="2" label={<BorderedTreeLabel>二级节点1</BorderedTreeLabel>} />
    <TreeItem nodeId="3" label={<BorderedTreeLabel>二级节点2</BorderedTreeLabel>} />
  </TreeItem>
</TreeView>

该方案灵活度最高，你可以完全自定义标签部分的DOM结构和样式，适配复杂的交互、样式需求。 #

方案2：全局覆写TreeItem内置样式（统一批量修改时优先用）

如果你需要给所有TreeItem统一加边框，不需要特殊自定义结构，可以直接覆写TreeItem内置的.MuiTreeItem-label类的样式，不需要额外包裹div也能实现效果，代码示例：

import { styled } from '@mui/material/styles';
import TreeItem from '@mui/lab/TreeItem';

const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
  '& .MuiTreeItem-label': {
    border: '1px solid #1976d2',
    borderRadius: 4,
    padding: '2px 8px',
    // 可额外添加选中、 hover 等状态的样式
    '&.Mui-selected': {
      borderColor: '#ff9800',
      backgroundColor: 'transparent'
    }
  }
}));

// 直接用自定义的StyledTreeItem替换原有TreeItem组件即可
<TreeView>
  <StyledTreeItem nodeId="1" label="一级节点">
    <StyledTreeItem nodeId="2" label="二级节点1" />
    <StyledTreeItem nodeId="3" label="二级节点2" />
  </StyledTreeItem>
</TreeView>

如果需要区分不同层级的节点边框样式，两种方案都支持传入nodeId、层级参数做差异化处理。

内容的提问来源于stack exchange，提问作者Jakub Słowikowski