TreeView - How to change font of expandable TreeItems to bold?

user_8189307 0
Viewed 376

I have an object which I map through and convert the key/value pairs to Material-UI TreeItems. Is it a way to add unique styling (font-weight bold) to TreeItems if they are expandable?

material-ui reactjs treeview javascript
1 Answers

TreeItem is expandable when it has any children. Otherwise, the children is undefined. You can conditionally render different styles after checking if any children exist:

import TreeView from "@material-ui/lab/TreeView";
import MuiTreeItem from "@material-ui/lab/TreeItem";

const useTreeItemStyles = makeStyles({
  label: {
    fontWeight: (props) => (props.children ? "bold" : "initial")
  }
});

function TreeItem(props) {
  const classes = useTreeItemStyles(props);
  return <MuiTreeItem {...props} classes={{ label: classes.label }} />;
}

Live Demo

Edit 67129075/treeview-how-to-change-font-of-expandable-treeitems-to-bold

user_94494260
Related