¿Cómo puedo insertar <style> en el DOM en un proyecto ReactJS donde los valores de la hoja de estilo son dinámicos y provienen de la base de datos?
Tengo el siguiente escenario simplificado:
<button class="buy-now-button">Buy now</button>Nota : no tengo acceso para modificar el elemento HTML o JSX, la solución debe ser solo CSS y debe basarse en el nombre de clase que tiene el botón.
Quiero poder agregar propiedades CSS como fondo, color, borde al elemento con el nombre de clase CSS .buy-now-button
Lo que necesito en términos de la hoja de estilo es:
<style> .buy-now-button { color: button.color; // where button.color value comes from DB background: button.background; // where button.background value comes from DB } </style>Y luego, ese estilo debe insertarse en el DOM.
¿ReactJS ofrece un mecanismo para insertar estilos en el DOM? ¿Cómo podría resolver este caso de uso?
Muchas gracias
Todo esto es ciertamente un antipatrón, ya que cada vez que realiza algún tipo de manipulación DOM directa con React, está abusando de la forma en que se supone que debe usarse, pero podría inyectar un bloque <style> una sola vez con el colores deseados:
function injectStylesheet() { const ss = document.createElement('style') ss.innerText = 'body { background-color: pink; }'; document.head.append(ss); } <button onClick="injectStylesheet()">add stylesheet</button> Si bien podría cambiar los colores directamente encontrando el elemento y actualizando su atributo de style , tendría que hacer esto en cada renderizado, lo que es solo un golpe de rendimiento innecesario.
¿Qué tal si usa un CDN para descargar un archivo css?
Ni siquiera necesitaría hacer esto dentro de ningún código React. Simplemente podría incluir lo siguiente en su index.html:
<link rel="stylesheet" type="text/css" href="SOME-CDN-URL" />