@mui 等高的网格项

Question

使用 React @mui 包，我想创建一个项目网格，所有项目都拉伸到与最高项目相同的高度。我尝试搜索类似的问题，但没有找到有效的解决方案，并使用@mui v5。这是我的示例，也在 Sandbox https://codesandbox 上找到。 io/s/happy-moon-y5lugj?file=/src/App.js。我更喜欢使用 @mui 组件而不是直接使用 grid css 的解决方案（如果可能）。我也无法修复列数，它需要响应。

import * as React from "react";
import {
  Box,
  Card,
  Container,
  Grid,
  Paper,
  Table,
  TableBody,
  TableRow,
  TableCell,
  Typography
} from "@mui/material";

export default function App() {
  const createTable = (rows) => {
    return (
      <Table>
        <TableBody>
          {[...Array(rows).keys()].map((n) => {
            return (
              <TableRow key={n}>
                <TableCell>Aaaaa</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    );
  };

  return (
    <Box p={3}>
      <Container maxWidth="sm" height="100%">
        <Grid container spacing={2} height="100%">
          <Grid item height="100%">
            <Paper height="100%" elevation={3} sx={{ p: 3 }}>
              <Typography variant="h4">Something</Typography>
              {createTable(5)}
            </Paper>
          </Grid>
          <Grid item height="100%">
            <Paper height="100%" elevation={3} sx={{ p: 3 }}>
              <Typography variant="h4">More things</Typography>
              {createTable(3)}
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
}

这就是我现在得到的。我希望将较短的项目填充在底部，使其与第一个项目的高度相同。

Answer 1

对我有用的东西是在 Papers sx 属性中使用以下内容：

{{ height: "100%", display: "flex", alignItems: "center" }}

Answer 2

请从方框向下使用此代码。您可以在 此处 的 mui 网站上详细了解如何使用网格项。

const StackOverflow = () => {
  const createTable = (rows) => {
    return (
      <Table>
        <TableBody>
          {[...Array(rows).keys()].map((n) => {
            return (
              <TableRow key={n}>
                <TableCell>Aaaaa</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    );
  };
  return (
    <Box p={3}>
      <Container maxWidth="sm">
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
              <Typography variant="h4">Something</Typography>
              {createTable(5)}
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
              <Typography variant="h4">More things</Typography>
              {createTable(3)}
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};