Переменные React

Question

Я учусь реагировать и столкнулся с некоторыми проблемами при стилизации моих компонентов. Я бы предпочел стилизовать один и тот же файл JavaScript, а не использовать отдельный файл, который кажется чище. Но как бы вы использовали переменную реакции в css?

import React from 'react';

const WeatherCard = (props) => {

    let temp = 70;
    let hc1 = 0;
    let hc2 = 0;
    let hc3 = 0;
    if (temp < 60) {
        hc1 = 0;
        hc2 = (255 - temp);
        hc3 = 255;
    }else{
        hc1 = '255';
        hc2 = (0 + temp).toString();
        hc3 = '0';
    }
    const cardStyle = {
        margin: '0 auto',
        background: 'linear-gradient(to bottom, rgb(${hc1}, ${hc2}, ${hc3}), pink)',
        color: 'black',
        width: '200px',
        height: '240px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
        borderRadius: '15px'
    };
    const locationStyle = {
        textAlign: 'center'
    };
    const cityStyle = {
        fontFamily: 'Merriweather',
        fontSize: '1.6rem'
    };
    const stateStyle = {
        fontFamily: 'Fira Sans',
        fontSize: '1.6rem'
    };
    const tempStyle = {
        fontGamily: 'Fira Sans',
        fontSize: '2rem',
        fontWeight: '200'
    };
    const conditionStyle = {
        fontFamily: 'Merriweather',
        fontSize: '1.2rem'
    };
    const iconStyle = {
        width: '40%'
    };

    return (  
        <div className='card' style={cardStyle}>
            <div className="location" style={locationStyle}>
                <h1 className='city' style={cityStyle}>Fairfax</h1>
                <h3 className='state' style={stateStyle}>VA</h3>
            </div>
            <img className= 'icon' style={iconStyle} src="img/cloud.png" alt="Error"/>
            <h1 className= 'temp' style={tempStyle}>70 F</h1>
            <h3 className= 'condition' style={conditionStyle}>Cloudy</h3>
        </div>
    );

}

Я пытаюсь использовать переменные hc1 hc2 и hc3 для изменения линейного градиента. Кто-нибудь знает, как использовать переменные реакции в css?

Спасибо!

Answer 1

Это не React-специфичный c, просто простой JavaScript синтаксис.

Строки в одинарных кавычках не расширяют переменные:

'linear-gradient(to bottom, rgb(${hc1}, ${hc2}, ${hc3}), pink)'

Вы ищете шаблонные литералы с использованием обратных тиков:

`linear-gradient(to bottom, rgb(${hc1}, ${hc2}, ${hc3}), pink)`