Search code examples
javascriptcssreactjsmaterial-uitree

how to cancel MuiTreeItem-group margin-left?

i am using MUI tree,and i want to cancel the margin-left of the second layer of MuiTreeItem-group

I tried to use makeStyles to solve it, but it doesn't seem to work

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

Then I try to use @global to modify, but it will cause other layers to be modified together

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

enter image description here

The effect I hope is that only the second layer can be modified

enter image description here

Solution

  • You can remove the .MuiTreeItem-group left margin by using the CSS child combinator to directly target the second level. For example:

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

    Which would produce the following effect: example treeview image

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