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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments