英文:
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'
}
}
}
}))
The effect I hope is that only the second layer can be modified.
英文:
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
答案1
得分: 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
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论