[docs] TreeItem2 customization

[sdancer75]

Related page

https://mui.com/x/api/tree-view/tree-item-2/

Kind of issue

Missing information

Issue description

There is not enough documentation and examples how to customize the TreeItem2 with css.

For example, how to change the bgColor on the selected TreeItem2?

The css classes are not exported from the TreeItem2 component and almost all examples concerns the old TreeItem even when rich item tree is used.

Context

To customize my own TreeItem2

Search keywords: TreeItem2

[flaviendelangle]

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.

[sdancer75]

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",
  },
}));

[flaviendelangle]

Sorry for the super long delay
We do not add the classes to the slots when using the headless API, because we don't want to be opinionated on this.
Depending on what the team working on our headless components decides, we might introduce data attributes in the future but this is not standardized yet.

You can add the classes you need yourself, see the updated example

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.