Is there a way to make Material ui Card without border

user_1164847 0
Viewed 8817

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?

material-ui reactjs javascript
2 Answers

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

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

user_118460700
Related