Passing props to material UI style

问题:

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: {
    minWidth: 275,
  },

to such follows:

    const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

when I tried the latest one, I got

 Line 15:  'props' is not defined  no-undef

when I updated code to be :

const styles = theme =>  (props) => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

also

 const styles  = (theme ,props) => ({
        card: {
        minWidth: 275, backgroundColor: props.color  },

instead of

const styles = theme => ({
    card: {
    minWidth: 275, backgroundColor: props.color  },

I got the component card style at the web page messy.

By the way, I pass props as follows:

<SimpleCard backgroundColor="#f5f2ff" />

please help!

回答1:

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(<Demo backgroundColor="#f00" />, 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 = <span className={classes.bullet}>•</span>;
      return (
        <div>
          <Card className={classes.card} style={{ backgroundColor }}>
            <CardContent>
              // etc

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

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

回答2:

This is what you want.

import * as React from 'react';
import { withStyles } from '@material-ui/core';

const Content = props => {
    const styles = theme => ({
        content:{
            "background-color" : props.backgroundColor
        }
    });
    const div = props => (
        <div className={props.classes.content}>
            {props.children}
        </div>
    );
    const Styled = withStyles(styles)(div);
    return (
        <Styled>{props.children}</Styled>
    );
}

export default Content;

Then you can use it like this way:

<Content backgroundColor="#FAFAFA">
  Well done
</Content>

Remeber to make a class component just like below, or you'll lose focus when it re-render.

import * as React from 'react';
import { withStyles } from '@material-ui/core';

class Content extends React.Component{
    styles = theme => ({
        content:{
            "padding" : this.props.padding,
            "min-height" : "100vh",
            "background-color" : this.props.backgroundColor
        }
    })

    div = props => (
        <div className={props.classes.content}>
            {props.children}
        </div>
    );
    
    Styled = withStyles(this.styles)(this.div);

    render(){
        return(
            <this.Styled>{this.props.children}</this.Styled>
        );
    }
}

export default Content;

回答3:

This can now be done using @material-ui/styles (still in alpha at the time of this writing), which provides syntax similar to Styled Components:

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    }
  }
});

export function MyButton(props) {
  const classes = useStyles(props);
  return <Button className={classes.root}>My Button</Button>;
}

With JSX: <MyButton color="red" hover="blue" />

This code is adapted from the demo, which uses makeStyles, but this functionality is also available in the other Material-UI APIs styled and withStyles (example).

The introduction of @material-ui/styles closes the issue mentioned by Ken Gregory.