I'd like to use css var() in order to change themes on my website at run-time. Every time a user selects a theme, I import the correspondent file into the page. But once I import an already imported css file, the style on the page doesn't get updated. I tried to solved it by removing the former css theme file from the tag, but it doesn't appear there as a tag with an href attribute, but rather as a tag with no possible way to query it and remove it.

For example:

Main.css:

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

ThemeA.css

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

ThemeB.css

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

Is there any way that I can solve it, or do I have to seek for an alternative solution? and if so, which solution is most suitable?

Edit

I do the import inside a react component. Here's an essence of how I do it:

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