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

Question

我正在尝试自定义 TreeView by adding a border to each TreeItem。

总的来说效果很好，我当前的版本是这样的：

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

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

Answer 1

您可以在设置 TreeItem 样式时定位 MuiTreeItem-label class 名称。作为参考，请参阅所有 CSS 全局 class 名称的列表 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
  }
}));

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

How to style MUI TreeItem label?

reactjs

material-ui

treeview