如何使Material UI Grid列与Paper同高并左对齐

1. 替代!important的左对齐方案 #

MUI Grid Item默认自带内边距，直接在第一个Grid Item的sx属性中设置px: 0（左右内边距清零）即可实现左对齐，无需依赖!important：

<Grid item xs={4} sx={{ px: 0, height: '100%' }}>

2. 实现TextField与Paper同高度 #

需要逐层设置高度，让TextField完全填充可用空间：

• 给Grid Container添加height: '100%'，使其占满Paper的高度
• 第一个Grid Item设置height: '100%'，占满Container的高度
• 给TextField的根元素和内部输入区域设置高度，同时调整输入框内边距保证内容显示正常：

<TextField
  id="outlined-basic"
  label=""
  variant="outlined"
  sx={{
    backgroundColor: "white",
    height: '100%',
    '& .MuiOutlinedInput-root': {
      height: '100%',
      '& input': {
        padding: '1rem', // 适配高度的内边距调整
      }
    }
  }}
/>

完整修改代码 #

import * as React from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import { TextField } from "@mui/material";

export default function ComplexGrid() {
  return (
    <Paper
      sx={{
        p: 2,
        margin: "auto",
        maxWidth: 500,
        flexGrow: 1,
        backgroundColor: "#1A2027",
      }}
    >
        <Grid container spacing={2} sx={{ height: '100%' }}>
          <Grid item xs={4} sx={{ px: 0, height: '100%' }}>
            <TextField
              id="outlined-basic"
              label=""
              variant="outlined"
              sx={{
                backgroundColor: "white",
                height: '100%',
                '& .MuiOutlinedInput-root': {
                  height: '100%',
                  '& input': {
                    padding: '1rem',
                  }
                }
              }}
            />
          </Grid>
          <Grid sx={{ alignSelf: "flex-end", color: "white" }} item xs={6}>
            <span>test v. test</span>
          </Grid>
        </Grid>
    </Paper>
  );
}

关键说明 #

• 左对齐：px:0是MUI sx属性的简写，优先级高于组件默认样式，无需强制覆盖
• 高度适配：通过height:100%逐层传递高度，确保TextField从Paper继承完整高度，同时调整输入框内边距避免内容挤压

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