如何自定义 Material UI Card boxshadow？答案

【问题标题】：How to customize the Material UI Card boxshadow?如何自定义 Material UI Card boxshadow？
【发布时间】：2021-06-06 17:24:53
【问题描述】：

我正在尝试从 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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>

sandbox

【讨论】：

非常感谢！我完全想多了。