CODEWITHSUNDEEP
reactjsmaterial-ui
Jessica Ni
Jessica Ni

Reputation: 27

How to customize the Material UI Card boxshadow?

I am trying to customize the box shadow for the Card from Material UI. I've tried setting the default boxShadow to none then adding my own style to the cardWrapper I created but this doesn't seem to work. How do you add your own custom boxShadow and is there a way to achieve this without using a div wrapper? Would appreciate help on how to do this, I can't seem to figure it out.

const useStyles = makeStyles({
  card: {
    paddingTop: 10,
    paddingBottom: 25,
    paddingLeft: 20,
    paddingRight: 20,
    boxShadow: "none",
  },
  cardWrapper: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 5,
  },
});
<div className={classes.cardWrapper}>
<Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} variant="h5" component="h2">
          Server Name
        </Typography>
      </CardContent>
</Card>
</div>

Upvotes: 2

Views: 17591

Answers (1)

alisasani
alisasani

Reputation: 2968

First create styles related to your targeted boxShadow in the useStyle as below:

const useStyles = makeStyles({
  root: {
    minWidth: 275,
    border: "1px solid",
    padding: "10px",
    boxShadow: "5px 10px red"
  },
//other styles and classes//
}

Then apply it to the Card component:

<Card className={classes.root}>
  //other parts of your code//
</Card>

sandbox

Upvotes: 7

Related Questions