Así que actualmente mi componente de reacción crea svgs para el usuario, pueden cambiar de un tema claro a uno oscuro y el svg actualizará sus colores en consecuencia. Luego quiero permitir que el usuario descargue el svg que tengo funcionando, pero si el usuario cambia el tema, el svg no se actualizará porque tengo el css insertado "en línea". Quiero crear una función personalizada que agregue el css al svg pero aún permita que el svg se cambie dinámicamente por tema después de la descarga.

 function setCustomStyles(svg) { const style = document.createElement("style"); style.innerHTML = Array.from(document.styleSheets) .filter( (styleSheet) => // Prevent CORS errors !styleSheet.href || styleSheet.href.startsWith(document.location.origin) ) .map((styleSheet) => Array.from(styleSheet.cssRules) .map((rule) => rule.cssText) .join(" ") ) .join(" "); svg.prepend(style); }

¿Alguna idea de cómo puedo hacer esto?

Aquí hay un ejemplo de codesandbox: https://codesandbox.io/s/silly-leftpad-nv163?file=/src/Main.js y pruébelo aquí: https://nv163.csb.app/

^ (cambie la opción css a 'en línea' para ver un ejemplo de descarga de trabajo; svg se descarga con estilo aplicado pero es inmutable después. o cambie a 'personalizado' donde el estilo se puede cambiar después de la descarga pero no se aplica al svg descargado.)

Nota al margen: también parece estar insertando todo el css de la página, no específicamente solo el estilo svg. ¿Alguna idea de cómo podría hacer esto?