Passing props to material UI style

Question

given card code as in here : card

how can I update the card style or any material UI style as from

    const styles = theme => ({
    card: {
           


        

Answer 1

This answer was written prior to version 4.0 severely out of date!

Seriously, if you're styling a function component, use makeStyles.

The answer from James Tan is the best answer for version 4.x

Anything below here is ancient:

When you're using withStyles, you have access to the theme, but not props.

Please note that there is an open issue on Github requesting this feature and some of the comments may point you to an alternative solution that may interest you.

One way to change the background color of a card using props would be to set this property using inline styles. I've forked your original codesandbox with a few changes, you can view the modified version to see this in action.

Here's what I did:

1. Render the component with a backgroundColor prop:

// in index.js
if (rootElement) {
  render(, rootElement);
}

2. Use this prop to apply an inline style to the card:

    function SimpleCard(props) {
      // in demo.js
      const { classes, backgroundColor } = props;
      const bull = •;
      return (
        

          
            
              // etc

Now the rendered Card component has a red (#F00) background

Take a look at the Overrides section of the documentation for other options.