我使用的是材质界面，我有一个网格坐在纸元素的顶部。网格中的第一列是文本输入字段，我希望它与纸的高度相同，我希望它向左推，以便它与纸元素共享左边框，但我不知道如何实现这种效果，我尝试设置0边距，改变位置，把高度和宽度弄得乱七八糟，毫无影响。
代码笔：https://codesandbox.io/s/laughing-ardinghelli-7cutft?file=/src/App.js
代码

import * as React from "react";
import { styled } from "@mui/material/styles";
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}>
          <Grid item xs={4} sx={{ alignSelf: "flex-start" }}>
            <TextField
              id="outlined-basic"
              label=""
              variant="outlined"
              sx={{
                backgroundColor: "white",
                padding: "0",
                flex: 0
              }}
            />
          </Grid>
          <Grid sx={{ alignSelf: "flex-end", color: "white" }} item xs={6}>
            <span>test v. test</span>
          </Grid>
        </Grid>
    </Paper>
  );
}

edit：我发现如果我禁用inspect元素中所有类MuiGrid-root.Muigrid-item的padding-left，它会将它推到左边，但我只想禁用第一个网格项的padding，用sx={{paddingLeft: 0}}覆盖它似乎没有任何作用
edit 2：设置sx={{paddingLeft: "0 !important", paddingTop: "0 !important"}}已经得到了我想要的位置，现在我只想把它拉伸到纸张的大小