React中table单元格设置background线性渐变图案不生效如何解决？

问题原因 #

• 渐变样式缺少linear-gradient()函数包裹，仅写颜色断点属于不合法的background属性值，浏览器会直接忽略该样式，这是问题的核心诱因
• 你传入的RGBA透明度参数值为255，但CSS规范中RGBA的第四个透明度参数取值范围为0~1，超出范围的参数可能引发部分浏览器解析异常

修复方案 #

修改def变量的定义，补全linear-gradient前缀，同时修正透明度参数的取值范围即可：

const describeColoredSensation = (val,r,g,b,a) => {
    // 将0-255范围的透明度转为CSS要求的0-1范围
    const alpha = a / 255;
    // 限制填充百分比不超过100%，避免val超出范围导致样式异常
    const pos = Math.min(10 * val, 100);
    // 补全linear-gradient函数前缀
    const def = `linear-gradient(rgba(${r},${g},${b},${alpha}) 0%, rgba(${r},${g},${b},${alpha}) ${pos}%, rgba(255,255,255,1) ${pos}%, rgba(255,255,255,1) 100%)`
    return (
            <td 
                style={{ background: def }} 
            >{val}</td>
    )
};

原有函数调用方式无需改动，修改后即可实现按val值动态填充单元格渐变背景的效果。

内容的提问来源于stack exchange，提问作者Paolo Di Pietro