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

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
  }
}));