如何在 React JS 中使用 Material UI 为卡片提供背景颜色作为道具？

Question

我正在使用Material UI next 并围绕卡片组件构建一个包装器。这允许我自定义组件。 我能够扩展组件，以便卡片内的标题和图像可以作为道具发送。但是，使用 JS in CSS 技术注入到 classes 属性中的背景颜色，我无法找到将背景颜色作为道具发送的方法。

使用JSS技术设置的类如下：

    const styles = {
      card: {
             maxWidth: 345,
             backgroundColor: '#hexcodehere'
      },

组件如下图：

    const { classes,label } = props;        
    <Card className={classes.card}
      label={label}
    >
      <CardText />
      <CardMedia />
    </Card>

如何使用道具设置背景颜色？

Answer 1

使用 classnames 包在 React 组件上实现自定义样式。

import classnames from 'classnames';

const { classes, label, backgroundColor } = props;  
<Card className={classnames(classes.card)} style={{ backgroundColor }}
   label={label}
>
  <CardText />
  <CardMedia />
</Card>

这个backgroudColor 属性可以是 CSS 支持的任何字符串。 例如：

• '#f0f' (#rgb)
• '#ff00ff' (#rrggbb)
• 'rgb(255, 0, 255)'
• 'rgba(255, 255, 255, 1.0)'