Material-UI: How to add border in TreeView

Question

Here, I have a code in React. I want to show dashed lines on the left of the tree.

How can I do that?

I need something like this:

And, I want to merge the style of TreeView with this code:

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"
    }

]

Now, I want TreeView to not show borderBottom at OrganizationalUnitName as 'A','C' and 'D'. Because they will be acting as a parent of their child. I want child to show borderBottom not the parent.

There are multiple organizationalUnitId. But whenever array of objects appears, I want objects to appear as a child not the parent.

How can I do that?

Answer 1

withStyles passes a classes object to the wrapped components. In makeStyles , you create a hook that returns a classes object and pass it the same way:

const useTreeItemStyles = makeStyles((theme) => ({
  {...}
  iconContainer: {
    "& .close": {
      opacity: 0.3
    }
  },
  group: {
    marginLeft: 7,
    paddingLeft: 18,
    borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`
  }
}));

function StyledTreeItem(props) {
  const classes = useTreeItemStyles(props);

  return (
    <TreeItem
      classes={{
        group: classes.group,
        iconContainer: classes.iconContainer
      }}
      {...other}
    />
  );
}

The example in this docs demonstrates how to add vertical border to the TreeItem . To add horizontal border, you can create a pseudo element for each TreeItem and use absolute position to place them correctly. Here is an example:

const useTreeItemStyles = makeStyles((theme) => ({
  root: {
    position: "relative",

    "&:before": {
      pointerEvents: "none",
      content: '""',
      position: "absolute",
      width: 14,
      left: -16,
      top: 14,

      // horizontal border
      borderBottom: (props) =>
        // only display if the TreeItem is not root node
        props.nodeId !== "1" &&
        // only display if the TreeItem has any child nodes
        props.children &&
        props.children?.length > 0
          ? `1px dashed ${fade(theme.palette.text.primary, 0.4)}`
          : "none"
    }
  },
  group: {
    marginLeft: 7,
    paddingLeft: 18,
    // vertical border from the docs
    borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`
  }
}));

Live Demo