样式化嵌套的 MUI TreeItem 未按预期工作答案

【问题标题】：Styling nested MUI TreeItem not working as expected样式化嵌套的 MUI TreeItem 未按预期工作
【发布时间】：2022-01-04 13:36:12
【问题描述】：

我正在尝试使用TreeView 实现一个树形数据结构。最近我向this question 询问了TreeItem 的样式。

我的情况是，树中的每个 node 都有自己的属性，说明它应该显示为绿色还是红色。

interface OrganisationTreeItemProps extends TreeItemProps {
  shouldBeGreen: boolean;
}

const OrganisationTreeItem = styled(TreeItem, {
  shouldForwardProp: (prop: PropertyKey) => prop !== "shouldBeGreen"
})<OrganisationTreeItemProps>(({ theme, shouldBeGreen }) => ({
  [`& .${treeItemClasses.label}`]: {
    .....
    color: shouldBeGreen ? "green" : "red", // the problem is here
    .....
  }
}));

这是一个CodeSandbox，最能描述问题。

我该如何解决这个任务？

【问题讨论】：

标签： reactjs material-ui treeview react-typescript

【解决方案1】：

解决方案在这里： LINK

问题在于标签的类（绿色和红色）具有相同的特异性。在您有的情况下层次结构，我建议使用不同的类和针对他们，例如 greenLabel 和 redLabel 类基于支柱。这是一个工作示例https://codesandbox.io/s/jolly-galileo-och9b?file=/src/App.tsx

【讨论】：