MUI Grid2 容器不占用剩余空间

Question

我正在尝试创建一个 React 布局，如代码沙箱项目中所示

我希望网格布局将占据线条指示的区域。

即使对于较小的屏幕宽度，我也希望左侧网格的宽度恒定为 216px，这就是为什么我没有使用类似 2:10 的宽度作为主要部分的宽度。

你能帮我确定我缺少什么吗？

为了让内部网格拉伸，我在下面尝试过。但这似乎也不起作用。

<Grid2 container direction="column" alignItems={"stretch"}>

Answer 1

简而言之，将根父级定义为

Grid2

并指定一个指定的

size

（必须大于所有子级），以便子级

Grid2

计算正确的占用空间，这一点很重要。层次结构和

size

属性的使用都很重要。

具体来说，您可以使用

size="grow"

让大多数组件增长到显示器的宽度。

---

以下是您期望显示的可行代码：

import { Grid2, ListItem } from "@mui/material";
import TopBar from "./TopBar1";
import VideoSummary from "./VideoSummary";

const preview = [...new Array(15)].map((_, index) => <h5>Hello {index}</h5>);

export default function YouTubeHome() {
  return (
    <Grid2 container direction="column" size={40}>
      <Grid2 color="blue" size="grow">
        <TopBar></TopBar>
      </Grid2>
      {/* REMARK: Remove the nowrap if you want the right-side grid to wrap under when not enough space. */}
      <Grid2 container direction="row" wrap="nowrap">
        <Grid2
          container
          minWidth="216px"
          direction="column"
          sx={{ bgcolor: "yellow" }}
        >
          <ListItem sx={{ bgcolor: "blue" }}>Your Videos</ListItem>
          <ListItem sx={{ bgcolor: "green" }}>Your Movies & TV</ListItem>
          <ListItem sx={{ bgcolor: "orange" }}>Test</ListItem>
        </Grid2>
        <Grid2 container sx={{ bgcolor: "pink" }}>
          {preview.map((text, index) => (
            <Grid2 sx={{ bgcolor: "red" }} size={3}>
              <VideoSummary
                key={index}
                Text={text}
                Even={index % 2 == 0}
              ></VideoSummary>
            </Grid2>
          ))}
        </Grid2>
      </Grid2>
    </Grid2>
  );
}

附注尽可能少地使用

Grid2

，太多会让你感到困惑。