search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.2k forks source link

[docs] TreeItem2 customization #12719

Open sdancer75 opened 3 months ago

sdancer75 commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

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