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'
}
}
}
}))
The effect I hope is that only the second layer can be modified
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:
Working CodeSandbox: https://codesandbox.io/s/material-demo-forked-rhn5xf?file=/demo.tsx:307-445