Me gustaría usar css var() para cambiar los temas en mi sitio web en tiempo de ejecución. Cada vez que un usuario selecciona un tema, importo el archivo correspondiente a la página. Pero una vez que importo un archivo css ya importado, el estilo de la página no se actualiza. Traté de resolverlo eliminando el archivo de tema css anterior de la etiqueta, pero no aparece allí como una etiqueta con un atributo href , sino como una etiqueta sin forma posible de consultarlo y eliminarlo.

Por ejemplo:

Principal.css:

 .header { background: var(--primary-color); }

TemaA.css

 :root { --primary-color: red; }

TemaB.css

 :root { --primary-color: blue; }

¿Hay alguna manera de que pueda solucionarlo, o tengo que buscar una solución alternativa? y si es así, ¿qué solución es la más adecuada?

Editar

Hago la importación dentro de un componente de reacción. Aquí hay una esencia de cómo lo hago:

 export const MyComponent = ({theme) => { import(`../styles/${theme}.css`); /* rest of the code */ })