如何将动态值传递给 ReactJS JSS？

Question

我需要以如下所示的方式将动态值传递给线性渐变。我该怎么做？我尝试在 cssinjss 网站上实现动态值的小示例，但没有成功。

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

您的代码是正确的，只是缺少将值告知变量 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>
    );
};

Answer 2

如果它只是放置动态值的一个地方，我会直接内联样式。我知道事情需要“完美”，但内联样式是完全合法的，我也会使用模板文字。

假设我有一个从中获取道具的组件。

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

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

如何将动态值传递给 ReactJS JSS？

How to pass dynamic values to ReactJS JSS?

css

reactjs

jss