Material-UI：如何在TreeView中添加边框

Question

Material-UI：如何在TreeView中添加边框

javascripthtmlcssreactjsmaterial-ui

5

这里有一段React的代码，我想在树的左侧显示虚线。

我应该怎么做呢？

我需要像这样的效果：

而且，我想要将TreeView的样式与此代码合并：

const StyledTreeItem = withStyles((theme) => ({
        iconContainer: {
            '& .close': {
                opacity: 0.3,
            },
        },
        group: {
            marginLeft: 2,
            paddingLeft: 3,
            borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
        },
    }))((props) => <TreeItem {...props} />);

"organizationalUnitsList": [
    {
      "organizationalUnitId": "",
      "organizationalUnitName": "A",
      "organizationalUnitsList": [
        {
          "organizationalUnitId": "",
          "organizationalUnitName": "b",
        }
      ]
    },
    {
      "organizationalUnitId": "",
      "organizationalUnitName": "C",
      "organizationalUnitsList": [
        {
          "organizationalUnitId": "",
          "organizationalUnitName": "D",
          "organizationalUnitsList": [
            {
               "organizationalUnitId": "",
               "organizationalUnitName": "e",
            }
         ]
        }
      ]
    },
    {
      "organizationalUnitId": "",
      "organizationalUnitName": "f"
    }

现在，我希望TreeView在组织单位名称为'A'、'C'和'D'的情况下不显示borderBottom。因为他们将作为其子级的父级。我希望只有子级显示borderBottom而非父级。

虽然有多个组织单位ID，但无论何时出现对象数组，我都希望将对象作为子级而非父级显示。

我该如何实现这一点？

- progpro

类似这样吗？https://nimb.ws/MB6HkA 你说的合并树形视图的风格是什么意思？ - m4n0

是的，就像那样。在设计中，我需要一条实线而不是虚线。 - progpro

@m4n0，嘿，我真的需要这个CodePen，请问你能分享一下图片中的CodePen链接吗？非常感谢。 - Nasyx Nadeem

@NasyxRakeeb 我在 DevTools 中进行了编辑以确认。我没有保存它。但是你可以使用下面的答案，对吗？ - m4n0

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NearHuscarl · Accepted Answer

这个文档中的示例演示了如何为TreeItem添加垂直边框。要添加水平边框，您可以为每个TreeItem创建伪元素，并使用absolute定位使它们正确地放置。以下是一个示例：

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

type StyledTreeItemProps = {
  rootNode?: boolean;
};

const StyledTreeItem = styled(TreeItem)<StyledTreeItemProps>(({ rootNode }) => {
  const borderColor = "gray";

  return {
    position: "relative",
    "&:before": {
      pointerEvents: "none",
      content: '""',
      position: "absolute",
      width: 32,
      left: -16,
      top: 12,
      borderBottom:
        // only display if the TreeItem is not root node
        !rootNode ? `1px dashed ${borderColor}` : "none"
    },

    [`& .${treeItemClasses.group}`]: {
      marginLeft: 16,
      paddingLeft: 18,
      borderLeft: `1px dashed ${borderColor}`
    }
  };
});

使用方法

<TreeView>
  <StyledTreeItem rootNode nodeId="1" label="Applications">
    <StyledTreeItem nodeId="2" label="Calendar" />
    <StyledTreeItem nodeId="3" label="Drive" />
  </StyledTreeItem>
  <StyledTreeItem rootNode nodeId="8" label="Documents">
    <StyledTreeItem nodeId="9" label="OSS" />
    <StyledTreeItem nodeId="10" label="MUI">
      <StyledTreeItem nodeId="11" label="index.js" />
    </StyledTreeItem>
  </StyledTreeItem>
</TreeView>

在线演示

V5版本

V4版本