CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uijss
SeaWarrior404
SeaWarrior404

Reputation: 4167

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

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?

Upvotes: 0

Views: 10153

Answers (1)

fyasir
fyasir

Reputation: 2970

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

Upvotes: 3

Related Questions