javascript - Material UI - 如何将网格容器拉伸(stretch)到父级高度和宽度

Question

问题

我无法在不使用 style 属性修改高度和宽度或编辑的情况下如何让 Grid 容器元素拉伸(stretch)到其父元素的高度和宽度带有 makeStyles/useStyles Hook 的样式。

我确信必须有一种更简单的方法。我已经用我想要的东西(用 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>
  );
}