How to pass dynamic values to ReactJS JSS?

Question

I need to pass dynamic values to linear-gradient in such a way shown below. How would I do this? I have tried implementing the small example of Dynamic Values on the cssinjss web site without success.

const useStyles = createUseStyles({
    card:{
        background: 'linear-gradient(to top, orange, rgb(to top, 255, props.green, 0))',
        width: '200px',
        height: '240px',
        margin: '50px',
        display: "flex",
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
        color: 'white',
        fontFamily: 'arial',
        padding: 6,
        borderRadius: 15,
        composes: 'shadow'
    }
});

const WeatherCard = (props) => {
    const classes = useStyles(props);

    return (
        <div>
            <div className={classes.card}>
                <Location />
                <Icon />                
                <Tempature />
            </div>
        </div>
    );
};

WeatherCard.defaultProps = {
    green: 125
};

Answer 1

Your code is correct, just missing the callback that tells the variable props with the values, try the following:

See in: https://cssinjs.org/react-jss/?v=v10.4.0#dynamic-values

const useStyles = createUseStyles({
     card: {
            background: props => `linear-gradient(to top, orange, rgb(to top, 255, ${props.green}, 0))`,
            width: '200px',
            height: '240px',
            margin: '50px',
            display: "flex",
            flexDirection: 'column',
            justifyContent: 'space-around',
            alignItems: 'center',
            color: 'white',
            fontFamily: 'arial',
            padding: 6,
            borderRadius: 15,
            composes: 'shadow'
        }
});
    
const WeatherCard = (props) => {
    const classes = useStyles({...props});

    return (
        <div>
            <div className={classes.card}>
                <Location />
                <Icon />                
                <Tempature />
            </div>
        </div>
    );
};

Answer 2

If it’s just one spot to put dynamic values, I would just inline style it. I understand that things need to be “perfect”, but inline styling is totally legitimate, I would use template literals as well.

So let’s say I have a component that I take a prop from.

function foo ({ green }) {
  return <div style='background:${green}'></div>
}

I used the curly brackets so I don’t need the props keyword, it understands I’m trying to grab the variable name.