时间戳

首页 > 解决方案 > 如何显示 Material-UI Grid 项目而不是卡片？

javascript - 如何显示 Material-UI Grid 项目而不是卡片？

问题描述

我认为 Material-UI 网格项目只是用于快速修复间距。我的网格项目现在显示为卡片？只是希望它是不可见的，但是文档没有解释如何做到这一点。感谢任何帮助！

import React, { useState, useEffect } from "react";
import Grid from "@mui/material/Card";
import { Container, TextField, FormControl } 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>
  );
}

标签： javascriptreactjsmaterial-ui

解决方案

这是因为您要导入Card!

import Grid from "@mui/material/Card";

它应该是什么：

import Grid from "@mui/material/Grid";

推荐阅读