CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Yuval Levy
Yuval Levy

Reputation: 2516

Is there a way to make Material ui Card without border

I have read the documentation the option to make it variant="outlined" or to make it raised

But is there a way to make the card without visible border at all?

Upvotes: 7

Views: 16429

Answers (3)

knhrvs
knhrvs

Reputation: 13

I think the easiest way to remove the border from card is by setting elevation to 0

<Card elevation={0}>
    Your content
</Card>

Upvotes: 1

Moni
Moni

Reputation: 924

You can also do that to remove border radius on Cards. You can simply add square={true} to Card Component.

<Card square={true}>
    Your content
</Card>

You can also read the documentation, If you wanted. Material Ui Paper Api

Upvotes: 0

Abito Prakash
Abito Prakash

Reputation: 4770

You can give inline styling to your card, giving border and box shadow property as none.

<Card style={{ border: "none", boxShadow: "none" }}>
    ....
</Card>

Another way to do it is by using makeStyles from @material-ui/core/styles and styling a class which could be given to the card.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";

const useStyles = makeStyles({
  custom: {
    border: "none",
    boxShadow: "none"
  }
});

const classes = useStyles();
.
.
.
return (
  <Card className={classes.custom}>
    ....
  </Card>
);

Upvotes: 20

Related Questions