如何在React中使用Material-UI实现内容左右对齐布局？

嘿，作为Material-UI新手遇到布局问题太正常啦，我看了你的代码，咱们一步步来搞定它～

问题分析 #

你的代码里有两个关键问题导致布局不符合预期：

• Grid列分配错误：你给左右两个Grid item都设了xs={3}，但Material-UI Grid是12格布局，这意味着它们加起来只占6格，剩下的空间会空着，右边内容放不下也没法拉伸占满剩余宽度。
• 未开启高度拉伸：默认情况下Grid容器不会强制子项填满高度，所以两边的Paper不会自动对齐高度。

解决方案 #

我给你调整了代码，主要做了这几点修改：

1. 修正Grid列比例：左边保持xs={3} md={3}，右边改成xs={9} md={9}，这样左右加起来刚好占满12格，右边会自动填充剩余宽度。
2. 开启Grid高度拉伸：给Grid container加上alignItems="stretch"属性，让两个子项高度保持一致。
3. 设置Paper占满高度：给Paper添加样式，让它填满父容器的高度，这样内容多的一侧会自动拉伸高度。

修改后的代码示例 #

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import Avatar from "@material-ui/core/Avatar";
import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Divider from "@material-ui/core/Divider";
import CardContent from "@material-ui/core/CardContent";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: "100%", // 让Card占满可用宽度
  },
  fullHeight: {
    height: "100%",
    padding: theme.spacing(2), // 加内边距让内容不贴边，更美观
  },
}));

export default function RecipeReviewCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardHeader
        avatar={<Avatar aria-label="recipe">AJ</Avatar>}
        title={<TextField placeholder="Search" margin="normal" />}
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
      />
      <Divider />
      <CardContent>
        <Grid container spacing={3} alignItems="stretch">
          <Grid item xs={3} md={3}>
            <Paper className={classes.fullHeight}>hi i'm abc</Paper>
          </Grid>
          <Grid item xs={9} md={9}>
            <Paper className={classes.fullHeight}>
              hi i'm abc workingqwertyuiopqwertyuiop dfgthyjklkddhwbuefh weuh
              vwetbg2ehn
            </Paper>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
}

效果说明 #

• 现在左右布局会占满Card的宽度，右边的Grid会自动拉伸填充剩余空间；
• 两边的Paper高度会保持一致，不管内容多少，都会自适应拉伸对齐；
• 给Paper加了内边距优化视觉效果，你可以根据自己的需求调整样式细节。

内容的提问来源于stack exchange，提问作者Arunya