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

Question

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

使用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)'

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

How to supply background color as a prop for cards using Material UI in React JS?

javascript

css

reactjs

material-ui

jss