MUI TreeItem：更改所选节点的背景颜色

Question

背景：作为一个副项目，我正在尝试创建一个像侧边栏一样的代码沙箱，其中将鼠标悬停在每个节点上时，将出现节点创建/编辑/删除选项，这将允许您在树查看器的节点上执行这些操作。我更愿意禁用focused |已选择 |悬停背景样式以实现该外观。 使用“withStyles”我成功地禁用了大部分聚焦 |已选择 |悬停样式，但有一种边缘情况，如果选择一个节点，其背景颜色仍然不会改变。

这是我用过的样式，

export const StyledTreeItem = withStyles({
  root: {
    "&.Mui-selected > .MuiTreeItem-content": {
      background: "white"
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover": {
      background: "white"
    },
    "&.MuiTreeItem-root > .MuiTreeItem-content:hover > .MuiTreeItem-label": {
      background: "white"
    },
    ".MuiTreeItem-root:hover": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content:hover": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content:hover > .MuiTreeItem-label": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content.Mui-selected": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content.Mui-selected:hover": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content.Mui-selected > .MuiTreeItem-label": {
      background: "white"
    },
    ".MuiTreeItem-root > .MuiTreeItem-content.Mui-selected.Mui-focused": {
      background: "white"
    }
  }
})(CustomTreeItem);

这是相同的沙箱。

Answer 1

将此块添加到根对象并完成：

    "& .MuiTreeItem-content.Mui-selected ": {
      background: "white"
    },