How do I change the font size and color of a TreeView?

Question

Give style like this:

const style = {
  overflow: "auto",
  backgroundColor: "#292929",
  color: "blue",
  height: 650,
  width: 1,
  flexGrow: 1,
  fontFamily: "Segoe Print",
  fontSize: 30
};

then used like in TreeView:

const MyTw = () => (
  <TreeView
    aria-label="file system navigator"
    defaultCollapseIcon={<ExpandMoreIcon />}
    defaultExpandIcon={<ChevronRightIcon />}
    sx={style}
    multiSelect={true}
  >
);

it doesn't change the font family and size. What am I missing? live example:

https://codesandbox.io/s/smoosh-grass-c3zohz?file=/src/App.js

Answer 1

I revised your style code so the font and size will display as you wanted. Here is the code snippet you can try:

const style = {
  overflow: "auto",
  backgroundColor: "#292929",
  color: "blue",
  height: 650,
  width: 1,
  flexGrow: 1,
  "& .MuiTreeItem-label": {
    fontFamily: "Segoe Print",
    fontSize: 30,
  }
};

The font and size will be like your setting.