如何设置 MUI TreeItem 标签的样式？

Question

我正在尝试通过为每个 TreeItem 添加边框来自定义 TreeView。

一般来说效果很好，我目前的版本是这样的：

但我希望它看起来像那样，我不知道如何设计它：

所以基本上，我只想用<div> 包围TreeItem 的标签。 有谁知道我该如何解决这个问题？

Answer 1

在设置TreeItem 的样式时，您可以定位MuiTreeItem-label 类名。如需参考，请参阅所有 CSS 全局类名称列表here。

import TreeItem, { treeItemClasses } from "@mui/lab/TreeItem";

const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
  [`& .${treeItemClasses.label}`]: {
    border: "solid blue 1px",
    borderRadius: theme.shape.borderRadius,
    marginTop: 3,
    marginBottom: 3
  }
}));