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

Question

问题

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

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

我不只是使用常规Box组件的原因是由于与Grid.

例子

代码沙盒

标签： javascriptcssreactjsmaterial-ui

Answer 1

我把事情复杂化了，对Box.

Box反应灵敏。我的收获是Grid在具有高度和宽度的项目上谨慎使用，并与for 屏幕布局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>
  );
}