如何自定义Material UI Card boxshadow？

Question

我正在尝试从 Material UI 自定义卡片的框阴影。我尝试将默认的 boxShadow 设置为 none，然后将我自己的样式添加到我创建的 cardWrapper 中，但这似乎不起作用。如何添加自己的自定义 boxShadow？有没有一种方法可以在不使用 div 包装器的情况下实现此目的？希望获得有关如何执行此操作的帮助，我似乎无法弄清楚。

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>

Answer 1

boxShadow首先在 useStyle 中创建与您的目标相关的样式，如下所示：

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

然后将其应用到 Card 组件：

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

沙箱