CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uijss
EliteRaceElephant
EliteRaceElephant

Reputation: 8162

Pass props to makeStyles and use in CSS shorthand property in Material UI

I pass props to a button component:

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?

Upvotes: 2

Views: 5889

Answers (1)

Jap Mul
Jap Mul

Reputation: 18749

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.

Upvotes: 8

Related Questions