Reactjs react js material ui树视图更改树项的文本颜色'；s标签

我有嵌套树项的材质ui树。我只想更改树项目标签的颜色。当我应用

style={{{backgroundColor:'green，color:'red'}}

时，它会改变整个树项目的颜色，包括我不想要的展开图标等。我也试过了

const applyTitle = (data) => {
    console.log("data", data)
    return (
      // 'testing title'
      <span style={{ color: 'purple' }} >{data.Title}</span>
    )
  }

---

您可以使用以下属性替代

树项的标签样式：

const useStyles = makeStyles({
  label: {
    backgroundColor: "green",
    color: "red"
  }
});

...

<TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="Applications">
        <TreeItem classes={{ label: classes.label }} nodeId="2" label="Calendar" />
        <TreeItem classes={{ label: classes.label }} nodeId="3" label="Chrome" />
        <TreeItem
          classes={{ label: classes.label }}
          nodeId="4"
          label="Webstorm"
          icon={<ChevronRightIcon />}
        />
      </TreeItem>
    </TreeView>

工作示例：

您能提供完整的代码吗？或者在线演示？好的，我将更新完整代码。我可以为标签应用条件样式吗？const useStyles=makeStyles（{label:{backgroundColor:“绿色”，color:“红色”}}）；是的，您可以将对象传递给useStyles:
const classes=useStyles（myObj）和makeStyles:
constuseStyles=makeStyles（{label:props=>（{backgroundColor:props.bgColor？props.bgColor:'green'，color:props.color}）}）。更多信息谢谢，我会查的。
const useStyles = makeStyles({
  label: {
    backgroundColor: "green",
    color: "red"
  }
});

...

<TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="Applications">
        <TreeItem classes={{ label: classes.label }} nodeId="2" label="Calendar" />
        <TreeItem classes={{ label: classes.label }} nodeId="3" label="Chrome" />
        <TreeItem
          classes={{ label: classes.label }}
          nodeId="4"
          label="Webstorm"
          icon={<ChevronRightIcon />}
        />
      </TreeItem>
    </TreeView>

...

const StyledTreeItem = withStyles({
    label: {
      backgroundColor: "green",
      color: "red"
    },
  })(TreeItem);

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="Applications">
        <TreeItem nodeId="2" label="Calendar" />
        <StyledTreeItem nodeId="3" label="Chrome" />
        <StyledTreeItem
          nodeId="4"
          label="Webstorm"
          icon={<ChevronRightIcon />}
        />
      </TreeItem>
    </TreeView>
  );