如何取消MuiTreeItem-group margin-left？

Question

我正在使用MUI树，我想取消MuiTreeItem-group第二层的margin-left

我尝试使用makeStyles来解决它，但似乎不起作用

const useStyles = makeStyles(() => ({
  root: {
    ".MuiCollapse-root .MuiCollapse-vertical .MuiTreeItem-group": {
      marginLeft: '0px',
    },
  }
}))

然后我尝试使用@global来修改，但是会导致其他层一起修改

const useStyles = makeStyles(() => ({
  root: {
   
    "@global": {
      ".MuiTreeItem-group": {
        marginLeft: '0px'
      }
    }
  }
}))

我希望的效果是只修改第二层即可

Answer 1

您可以使用

CSS 子组合器

删除 .MuiTreeItem-group 左边距来直接定位第二级。例如：

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

这会产生以下效果：

工作 CodeSandbox：https://codesandbox.io/s/material-demo-forked-rhn5xf?file=/demo.tsx:307-445