如何让Material-UI Grid组件的item项不显示为卡片样式

• 核心错误
  你错误将Card组件重命名为Grid导入，当前代码中所有<Grid>标签本质都是MUI的Card组件，自然会携带卡片的阴影、圆角、内边距等默认视觉样式，和Grid组件的原生表现不符。
  错误导入语句：
  import Grid from "@mui/material/Card";
• 修复方法
  修改Grid的导入语句即可，两种可选写法：

1. 单独导入Grid组件：
   import Grid from "@mui/material/Grid";
2. 与其他MUI组件统一批量导入：
   修改原有批量导入语句为import { Container, TextField, FormControl, Grid } from "@mui/material";，同时删除错误的单独Grid导入行即可。

• 修正后完整代码

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

export default function MainPage() {
  return (
    <Container maxWidth="lg" style={{ height: "100vh" }}>
      <Grid container>
        <Grid item xs={12}>
          <img
            style={{ width: "800px" }}
            src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
            alt="half-title-1"
          />
        </Grid>

        <Grid item xs={12}>
          <img
            style={{ width: "800px" }}
            src="https://image.shutterstock.com/image-photo/red-apple-fruit-leaf-isolated-260nw-203589940.jpg"
            alt="half-title-2"
          />
        </Grid>
      </Grid>
    </Container>
  );
}

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