如何在React MUI中设置卡片样式？包含沙盒

Question

我正在尝试使用MUI使卡片变红。正在创建该类，但未将其应用于卡片。

https://codesandbox.io/s/objective-solomon-czpsm?fontsize=14&hidenavigation=1&theme=dark

Answer 1

问题是您向卡提供了classes={classes.card}。
classes需要一个对象，而不是字符串（您也可以看到警告打印在控制台上）：

  

警告：道具类型失败：无效   提供给classes类型的道具string   WithStyles(ForwardRef(Card))，预期object。

将类更改为className，它将起作用。

<Card className={classes.card}>

Answer 2

className等效于HTML中的class。 当您要将类名传递给组件时，应始终在React中使用className。

另一方面，

classes是将样式传递到的对象。

用法示例；

<Box className={classes.banner}>Hello World</Box>