javascript - Pass props to makeStyles and use in CSS shorthand property in Material UI - Stack Overflow

admin管理员组

文章数量:1394601

I pass props to a button ponent:

const StoreButton = ({ storeColor }) => {
  const borderBottom = `solid 3px ${storeColor}`;
  const classes = useStyles({ borderBottom });

  return (
    <Button variant="outlined" size="small" className={classes.button}>
      Store
    </ Button>
  )
};

I create the borderBottom property before I use it in classes. I would like to construct the property inside makeStyles but this leads to an error:

const useStyles = makeStyles(theme => ({
  button: {
    borderBottom: props => props.borderBottom,
    // borderBottom: `solid 3px ${props => props.borderBottom}`; // function is pasted in
  },
}));

If I construct the CSS shorthand inside makeStyles it creates solid 3px solid 3px function(props){return props.borderBottom;}. when I inspect it in Chrome. Thus, this way the styles are invalid.

Is there a way to pass props to CSS shorthand properties without this workaround of creating it outside makeStyles?

I pass props to a button ponent:

const StoreButton = ({ storeColor }) => {
  const borderBottom = `solid 3px ${storeColor}`;
  const classes = useStyles({ borderBottom });

  return (
    <Button variant="outlined" size="small" className={classes.button}>
      Store
    </ Button>
  )
};

I create the borderBottom property before I use it in classes. I would like to construct the property inside makeStyles but this leads to an error:

const useStyles = makeStyles(theme => ({
  button: {
    borderBottom: props => props.borderBottom,
    // borderBottom: `solid 3px ${props => props.borderBottom}`; // function is pasted in
  },
}));

If I construct the CSS shorthand inside makeStyles it creates solid 3px solid 3px function(props){return props.borderBottom;}. when I inspect it in Chrome. Thus, this way the styles are invalid.

Is there a way to pass props to CSS shorthand properties without this workaround of creating it outside makeStyles?

• javascript
• css
• reactjs
• material-ui
• jss

Share Improve this question Follow asked Sep 8, 2019 at 12:46 EliteRaceElephantEliteRaceElephant 8,16244 gold badges5656 silver badges6666 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You almost had it right, the only thing to change is this:

borderBottom: props => `1px solid ${props.color}`,

Now the value is a proper function. Inside the function it constructs the correct string value.

本文标签： javascriptPass props to makeStyles and use in CSS shorthand property in Material UIStack Overflow