MUI TreeItem: changing background colour for selected node

Question

Background: as a side project, I'm trying to create a code sandbox like sidebar where upon hovering on each node, node create/edit/delete options will appear, which will let you perform those actions on the nodes of the tree viewer. I would prefer to disable focused | selected | hover background styles to achieve that look. Using "withStyles" I have managed to disable most of the focused | selected | hover styles, but there is an edge case where if a node is selected, its background color still does not change.

Here are the styles I have used,

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);

and here's the sandbox for the same.

Answer 1

add this block to root object and done:

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