CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
personwholikestocode
personwholikestocode

Reputation: 561

How to display Material-UI Grid items not as cards?

I thought Material-UI grid items were just used for quick spacing fixes. My grid items are now showing up as cards? Would just like it to be invisible how it was, however the docs don't explain how to do this. Appreciate any help!

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>
  );
}

Upvotes: 2

Views: 322

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81280

It's because you're importing a Card!

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

What it's supposed to be:

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

Upvotes: 2

Related Questions