Блог

Как исправить Type 'string' has no properties in common with type 'CSSProperties'

     const points = 100;
        const radius = 257;
        const max = 100;
        const peaks = [ 10, 50, 90 ];
        const step = (max   1) / points;
        const realPeaks = peaks.map((peak) => Math.floor(peak * (1 / step)));
        const hueStep = 120 / points;
    const digit = props.item.temperature;
    const outerContainer = [];
    for (let i = 0; i < points; i  ) {
    const intStep = Math.ceil(step * i);
            const intNextStep = Math.ceil(step * (i   1));
    
            let styles = `transitionDelay: ${(i / digit * (i / digit)   1)}  's'`;
    
            if (intStep <= digit) {
                styles  = `backgroundColor: hsl(${240   i * hueStep} , 92%, 64%)`;
            }

***ADDEDD***
if (intStep > digit || (intStep <= digit amp;amp; intNextStep <= digit)) {
            styles  = `
        -webkit-transform: rotate(${degree}deg);
        -moz-transform: rotate(${degree}deg);
        -ms-transform: rotate(${degree}deg);
        -o-transform: rotate(${degree}deg);
        transform: rotate(${degree}deg);`;
        }
    outerContainer.push(<i className="bar" style={styles} />);
        }
 

То, что я пытаюсь здесь сделать, — это добавить backgroundColor if intStep <= digit . но styles={styles}```` have an error which is the тип ‘string’ не имеет общих свойств с типом ‘CSSProperties»`. Как на этом зациклиться.

Я добавил код для преобразования

Вам нужен объект вместо строки для styles переменной:

 const styles: React.CSSProperties = {
    transitionDelay: `${(i / digit * (i / digit)   1)}  's'`
};
if (intStep <= digit) {
    styles.backgroundColor = `hsl(${240   i * hueStep} , 92%, 64%)`;
}