如果它只是一个放置动态值的地方，我会直接使用内联样式。我理解事情需要“完美”，但是内联样式是完全合法的，我也会使用模板常量。
假设我有一个组件，我从它那里取了一个 prop 。

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

我使用了花括号，所以我不需要props关键字，它理解我试图获取变量名。

您的代码是正确的，只是缺少将值告知变量props的回调，请尝试以下操作：
参见：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>
    );
};