0
291
ViewsNo se puede pasar un patrón a color de fondo
Estoy usando React Javascript.
Estoy tratando de aplicar un patrón lineal de fondo a las celdas de una tabla. El objetivo es tener la celda coloreada para un porcentaje dado, mientras que el resto es blanco.
La función es la siguiente:
const describeColoredSensation = (val,r,g,b,a) => { const pos = 10 * val; const def = `rgba(${r},${g},${b},${a}) 0%, rgba(${r},${g},${b},${a}) ${pos}%, rgba(255,255,255,1) ${pos}%, rgba(255,255,255,1) 100%)` return ( <td style={{ background: `${def}`}} >{val}</td> ) };La función se llama como
<tr> {describeColoredSensation(item.value,253,253,62,255)} </tr> Un ejemplo de contenido de variable de def es:
"rgba(253,253,62,255) 0%, rgba(253,253,62,255) 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%)"Pero al inspeccionar el navegador, el color de fondo no está configurado (el atributo de color de fondo no está presente).
Si bien solo tengo 4 colores diferentes, no puedo usar CSS porque el valor de la variable val cambia dinámicamente.
Por cierto, si defino const def = "rgba(255,0,0,255)"; se ejecuta correctamente, mostrando todas las celdas en rojo.
Además, si copio el contenido de la variable def en el depurador del navegador, se muestra correctamente.
Entonces, creo que el problema es cómo digerir la declaración para React Javascript.
1 answers
Answer question0
Por defecto, el background toma un solo color. Debes usar un degradado si quieres mezclar colores.
Tenga en cuenta que mientras los canales de color rgb están en el rango [0,255] , el canal alfa solo está en el rango [0,1] .
const describeColoredSensation = (val, r, g, b, a) => { const pos = 10 * val; const def = `linear-gradient(to right, rgba(${r},${g},${b},${a}) 0%, rgba(${r},${g},${b},${a}) ${pos}%, rgba(255,255,255,1) ${pos}%, rgba(255,255,255,1) 100%)`; return <td style={{ background: def }}>{val}</td>; }; 
