将道具传递给makeStyles并在Material UI中的CSS速记属性中使用

Question

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?

Answer 1

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.