How to style MUI TreeItem label?

Question

I'm trying to customize a TreeView by adding a border to each TreeItem.

Generally it works great, my current version looks like this:

But I wish it looks was like that, and I have no idea how to style it:

So basically, I would like to surround only TreeItem's label with <div>. Does anyone have an idea how I can solve this?

Answer 1

You can target the MuiTreeItem-label class name when styling the TreeItem. For reference, see the list of all CSS global class names 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
  }
}));