0

Im using Material UI next and building a wrapper around the card component. This allows me to customise the component. Im able to extend the component such that the title and image present inside the card can be sent as props. However, the background color, which is injected into the classes attribute using the JS in CSS technique, Im unable to find a way to send the background color as props.

The classes which is set using the JSS technique is as follows:

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

The component is as shown below:

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

How to set the background color using props?

SeaWarrior404
  • 3,811
  • 14
  • 43
  • 65

1 Answers1

3

Use classnames package to implement custom styling over React component.

import classnames from 'classnames';

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

This backgroudColor props can be any string that is supported by CSS. e.g:

  • '#f0f' (#rgb)
  • '#ff00ff' (#rrggbb)
  • 'rgb(255, 0, 255)'
  • 'rgba(255, 255, 255, 1.0)'
fyasir
  • 2,924
  • 2
  • 23
  • 36
  • What you have mentioned is right, however my question is how do you pass the background color as props(The way I pass label name as props,so in this case maybe a hex code as props) when using this as a standalone component along with other components. – SeaWarrior404 Feb 21 '18 at 12:26
  • This would be any string that support css. I updated my answer – fyasir Feb 21 '18 at 12:33