MUI V5 Why us Box with Grid component

huangapple go评论66阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年2月19日 10:21:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75497617.html