英文:
MUI V5 Why us Box with Grid component
问题
I removed the Box
component applying any props to the outermost Grid
and everything seems the same, I think. Is there an advantage to wrapping a Grid
component with a Box
? Any help in would be great!
删除外部容器似乎没有任何效果。
英文:
I'm using MUI to learn some react for the first time. I'm wondering why use the Box
component along with the Grid
component. From the docs it shows this as an example
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
I removed the Box
component applying any props to the outermost Grid
and everything seems the same, I think. Is there an advantage to wrapping a Grid
component with a Box
? Any help in would be great!
Removing outer most container seems to do nothing
答案1
得分: 0
Box
= div
Check it out here: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js
Which just calls this: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createBox.js
It's a div that accepts camelCase css props and adheres to MUI's styling system rules, that's it - it's a div
Almost everywhere you see Box
used, replace it with div
with the inline CSS props and you'll have the same thing
In your code example, it would only make sense if it were the child of a flex
container. Otherwise, it literally does absolutely nothing (that a normal div
doesn't), because flex-grow
is only relevant inside flex
containers.
英文:
Box
= div
Check it out here: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js
Which just calls this: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createBox.js
It's a div that accepts camelCase css props and adhere's to MUI's styling system rules, that's it - it's a div
Almost everywhere you see Box
used, replace it with div
with the inline CSS props and you'll have the same thing
In your code example, it would only make sense if it were the child of a flex
container. Otherwise, it literally does absolutely nothing (that a normal div
doesn't), because flex-grow
is only relevant inside flex
containers.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论