如何取消MUI Tree组件第二层MuiTreeItem-group的margin-left？

正确实现代码 #

通过精准的CSS嵌套选择器，只定位到第二层的MuiTreeItem-group元素，不会影响其他层级：

const useStyles = makeStyles(() => ({
  root: {
    '& > .MuiTreeItem-group > .MuiTreeItem > .MuiTreeItem-group': {
      marginLeft: 0,
    },
  },
}));

之前方法的问题分析 #

• 第一种写法的选择器.MuiCollapse-root .MuiCollapse-vertical .MuiTreeItem-group没有明确层级关系，无法精准匹配目标的第二层元素，导致样式不生效。
• 使用@global会全局覆盖所有MuiTreeItem-group的样式，直接取消了所有层级的缩进。

效果对比 #

原效果：

期望效果：

内容的提问来源于stack exchange，提问作者jan