[tree view][RichTreeView] Custom styling not working

[SageJustus]

Steps to reproduce

Link to live example: demo

Steps:

1. check line 127 in example above

Current behavior

TreeItem2IconContainer No changes to the style.

Expected behavior

The background color of TreeItem2IconContainer should change to red.

Context

I found that the MuiTreeItem2-iconContainer classname has a hash prefix, which caused the custom style not to take effect.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: style RichTreeView

[arthurbalduini]

Hello @SageJustus,

You are trying add styles to the Icon as you would on the TreeItem component. TreeItem2 only uses classes defined by state changes.
In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly to TreeItem2IconContainer (check line 293 of the modified demo)

Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@SageJustus: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[SageJustus]

Hello @SageJustus, 你好

You are trying add styles to the Icon as you would on the TreeItem component. TreeItem2 only uses classes defined by state changes.您正在尝试向图标添加样式，就像在 TreeItem 组件上一样。 TreeItem2 仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly to TreeItem2IconContainer (check line 293 of the modified demo)在你分享的演示中，为了改变图标容器的背景颜色，你可以选择对你来说更方便的样式方法，例如，为它定义你自己的类，或者直接使用内联样式（ TreeItem2IconContainer 查看修改后的演示的第 293 行）

Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭，如果您发现有问题😄，请随时重新打开它

the modified demo Sandbox not found

It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.

[SageJustus]

Hello @SageJustus, 你好

You are trying add styles to the Icon as you would on the TreeItem component. TreeItem2 only uses classes defined by state changes.您正在尝试向图标添加样式，就像在 TreeItem 组件上一样。 TreeItem2 仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly to TreeItem2IconContainer (check line 293 of the modified demo)在你分享的演示中，为了改变图标容器的背景颜色，你可以选择对你来说更方便的样式方法，例如，为它定义你自己的类，或者直接使用内联样式（ TreeItem2IconContainer 查看修改后的演示的第 293 行）

Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭，如果您发现有问题😄，请随时重新打开它

@arthurbalduini I assume your modified code is as follows:

<TreeItem2IconContainer
            sx={{ backgroundColor: "red" }}
            {...getIconContainerProps()}
          >

So what does the following code do? Has it taken effect?

[`& .${treeItemClasses.iconContainer}`]: {
    marginRight: theme.spacing(2),
  }

[arthurbalduini]

Hello @SageJustus, 你好
You are trying add styles to the Icon as you would on the TreeItem component. TreeItem2 only uses classes defined by state changes.您正在尝试向图标添加样式，就像在 TreeItem 组件上一样。 TreeItem2 仅使用由状态更改定义的类。 In the demo you shared, in order to change the background color of the icon container, you can choose the styling approach that is more convenient to you, for example defining your own classes to it or using inline styles directly to TreeItem2IconContainer (check line 293 of the modified demo)在你分享的演示中，为了改变图标容器的背景颜色，你可以选择对你来说更方便的样式方法，例如，为它定义你自己的类，或者直接使用内联样式（ TreeItem2IconContainer 查看修改后的演示的第 293 行）
Will consider the issue as closed, do not hesitate to re-open it if you find something wrong 😄将认为问题已关闭，如果您发现有问题😄，请随时重新打开它

the modified demo Sandbox not found

It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.

Sorry, I just changed the privacy of the Sandbox so you can access it.

[arthurbalduini]

@arthurbalduini I assume your modified code is as follows:

<TreeItem2IconContainer
            sx={{ backgroundColor: "red" }}
            {...getIconContainerProps()}
          >

So what does the following code do? Has it taken effect?

[`& .${treeItemClasses.iconContainer}`]: {
    marginRight: theme.spacing(2),
  }

The mentioned line will not have the desired effect either.
On the docs you can find the list of the available classes for TreeItem2. Notice that it differs from the available classes listed for TreeItem.

[SageJustus]

@arthurbalduini I assume your modified code is as follows:我假设您修改后的代码如下：

<TreeItem2IconContainer
            sx={{ backgroundColor: "red" }}
            {...getIconContainerProps()}
          >

So what does the following code do? Has it taken effect?那么下面的代码是做什么的呢？生效了吗？

[`& .${treeItemClasses.iconContainer}`]: {
    marginRight: theme.spacing(2),
  }

The mentioned line will not have the desired effect either.提到的行也不会达到预期的效果。 On the docs you can find the list of the available classes for TreeItem2. Notice that it differs from the available classes listed for TreeItem.在文档中，您可以找到 的 TreeItem2 可用类列表。请注意，它与 列出的可用 TreeItem 类不同。

@arthurbalduini Well I think this is a documentation issue and the examples in the documentation should be updated.

[arthurbalduini]

@arthurbalduini Well I think this is a documentation issue and the examples in the documentation should be updated.

I agree with you, will send a PR to update the docs ASAP. Thank you !