将 css 文件嵌入到内部 <style> 元素中

Question

我正在尝试通过不同的样式表动态交换。因为我使用的是 React，所以我 require() 的样式表作为“样式”元素嵌入到 html 中。
我尝试做的是删除旧样式元素并创建包含新样式表的新元素。
然而，我已经意识到，将 newstyle.css 中的内容“插入”到我刚刚创建的 <style> 元素中并非易事。

有没有一个优雅的解决方案？

我尝试使用 xhttp GET 请求读取我的 .css 文件，但我失败了。关于这个特定主题有几个问题，但我怀疑 React 中的情况有所不同，因为我似乎不能只提供我的 style.css 到 xhttp GET 的简单相对路径。

我还寻找了 React 特定的文件阅读器，但通常没有找到太多。也许我“手动”读取文件的方法不适合使用 React、node 等的项目。

感谢您的帮助，希望这个问题不是多余或含糊的。

Answer 1

这样的东西有用吗？

const newCSS = document.createElement('link');
newCSS.href = `/path/to/templates/${style}.css`;
newCSS.rel = 'stylesheet';
document.head.appendChild(newCSS);