Material UI - 如何将 Grid 容器拉伸到父级的高度和宽度

Question

问题

在不使用 style 属性修改高度和宽度或使用 makeStyles/useStyles 钩子编辑样式的情况下，我无法研究如何让 Grid 容器元素拉伸到其父元素的高度和宽度。

我相信一定有更简单的方法。我已经创建了一个沙箱，其中包含我想要的内容（使用 vanilla React 编写）以及我目前拥有的内容（使用 Material UI 组件编写）。

我之所以不只是使用常规的Box 组件，是因为它与Grid 相比缺乏响应控制。

示例

Codesandbox

Answer 1

我把事情复杂化了，对Box的力量没有欣赏到。

Box 是响应式的。我的收获是在具有高度和宽度的项目上谨慎使用Grid，并将Box 与Hidden 结合用于屏幕布局。

import React from "react";
import { Box } from "@material-ui/core";

export default function Layout() {
  return (
    <Box bgcolor="green" display="flex" height="100vh" width="100vw">
      <Box bgcolor="red" flex={{ xs: 1, sm: 2 }} />
      <Box
        bgcolor="yellow"
        display="flex"
        flex={1}
        flexDirection={{ xs: "column", sm: "row" }}
      >
        <Box bgcolor="blue" flex={{ xs: 1, sm: 6 }} />
        <Box bgcolor="purple" flex={{ xs: 11, sm: 6 }} />
      </Box>
    </Box>
  );
}