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

【问题标题】：How to style card in React MUI? Sandbox included如何在 React MUI 中设置卡片样式？包括沙盒
【发布时间】：2019-11-13 17:18:47
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

把classes改成className，就可以了。

<Card className={classes.card}>

【讨论】：

我不明白，为什么这会起作用（按查看代码图标）？ material-ui.com/components/cards/#media
我不确定你的意思，因为在他们的例子中我也看到了 className。简而言之，当您使用 className 时，您提供了一个字符串，只有一个类名。样式将应用于包装器元素。当你使用类时，你可以直接覆盖所有的组件样式：material-ui.com/api/card（去底部的 css 部分）。它可能看起来像这样：classes={{root: classes.root, someAnotherRuleKey: classes.someAnotherCss}}

【解决方案2】：

className 等价于 HTML 中的class。当你想将类名传递给组件时，你应该始终在 React 中使用className。

另一方面，classes 是您已将样式传递到其中的对象。

用法示例；

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

【讨论】：