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:

Render the component with a backgroundColor prop:

// in index.js
if (rootElement) {
  render(<Demo backgroundColor="#f00" />, rootElement);
}

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:

Deleted the old answer, because it's no reason for existence.

Here's what you want:

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;

Now you can use it like:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

Official Documentation

回答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 in the accepted answer.

回答4:

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({color: 'red', hover: 'green'});
  return <Button className={classes.root}>My Button</Button>;
}

来源：https://stackoverflow.com/questions/48879517/passing-props-to-material-ui-style

标签

reactjs

material-ui