[docs] TreeItem2 customization about mui-x HOT 2 OPEN

Hi,

We should indeed improve the documentation around this component.
For the classes, you can import the one of TreeItem, they are shared across the two components to make the migration easier.
Most CSS customization should be identical between the two components.

from mui-x.

When you keep the same name for one component ie classes but you change all others ie TreeItem2Root, TreeItem2Content, etc is confusing.

Anyway, using the same example from react-tree-view headless API from https://mui.com/x/react-tree-view/rich-tree-view/customization/#headless-api I can not change the background color of the selected item.

My codesandbox is here

https://codesandbox.io/p/sandbox/condescending-merkle-5pk7wt?file=%2Fsrc%2FDemo.js%3A39%2C16

I unsuccessfully tried to customize the context with this code. Any recommendation for that?

const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
  [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
    backgroundColor: "red",
    color: "white",
  },
}));

from mui-x.