MUI Grid宽度/CSS问题：组件无法占满全屏求助

开发时遇到Material UI表单组件无法占满全屏的问题，尝试调整CSS、修改Grid项尺寸及间距均无效，怀疑min-width属性影响布局。页面表现为表单组件未撑满浏览器宽度，调试可见相关CSS属性存在限制。

相关代码如下：

app.css #

body {
  background-color: aliceblue;
  justify-content: center;
  min-width: 100%;
}

app.jsx #

import { useState } from "react";
import MaterialForm from "./components/MaterialForm";
import "./App.css";

function App() {
  return (
    <>
      <MaterialForm />
    </>
  );
}

export default App;

表单组件代码 #

import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";

export default function MaterialForm() {
  const [formData, setFormData] = useState({
    legalFirstName: "",
    legalLastName: "",
    email: "",
    contactNumber: "",
    
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission here
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit} style={{ width: "100%" }}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <TextField
            fullWidth
            label="Legal First Name (As mentioned in Passport)"
            variant="outlined"
            name="legalFirstName"
            value={formData.legalFirstName}
            onChange={handleChange}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            label="Legal Last Name (As mentioned in Passport)"
            variant="outlined"
            name="legalLastName"
            value={formData.legalLastName}
            onChange={handleChange}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            label="Email"
            variant="outlined"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            fullWidth
            label="Contact Number"
            variant="outlined"
            name="contactNumber"
            value={formData.contactNumber}
            onChange={handleChange}
          />
        </Grid>
      </Grid>
    </form>
  );
}

排查及解决步骤 #

1. 清除全局默认边距：浏览器默认会给html、body添加margin或padding，先全局重置：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

同时删除body样式里无效的justify-content: center（未设置display: flex时该属性不生效）。

2. 确保Grid容器撑满宽度：给Grid容器添加width: 100%样式，避免容器自身宽度受限：

<Grid container spacing={2} style={{ width: "100%" }}>

3. 调整min-width属性：将body的min-width: 100%改为width: 100%，避免可能的布局冲突；同时检查是否有父组件设置了固定宽度或最大宽度限制。

4. 覆盖组件默认约束：若TextField仍有隐藏的最大宽度限制，可通过sx属性强制覆盖：

<TextField
  fullWidth
  sx={{ maxWidth: '100%' }}
  // 其他属性
/>

按上述步骤调整后，即可解决组件无法占满全屏的问题。

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