材质用户界面-如何将Grid容器拉伸到父级的高度和宽度

问题描述

问题

在不使用Grid道具修改高度和宽度或使用{{编辑样式的情况下，如何使style容器元素延伸到其父元素的高度和宽度，我无法工作1}}钩子。

我确信必须有一个更简单的方法。我已经创建了一个沙箱，其中包含我想要的内容（使用Vanilla React编写）以及到目前为止的内容（使用Material UI组件编写）。

我之所以不使用常规的makeStyles/useStyles组件，是因为与Box相比，它缺乏响应式控件。

示例

Codesandbox

解决方法

我太过复杂了，对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>
  );
}