Question

我正在使用Material UI next并在卡组件周围构建一个包装器。这允许我自定义组件。我能够扩展组件，使卡内的标题和图像可以作为道具发送。但是，背景颜色是使用CSS技术中的JS注入到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支持的任何字符串。例如：

＆＃39;＃f0f＆＃39; （#RGB）
＆＃39;＃FF00FF＆＃39; （#RRGGBB）
＆＃39; rgb（255,0,255）＆＃39;
＆＃39; rgba（255,255,255,1.0）＆＃39;

如何使用React JS中的Material UI为背景颜色提供背景颜色？

1 个答案: