javascript - 获取响应<style>标签，并使用React将其附加到头部HTML部分

我知道这完全是不好的作法，但这是针对这种情况的最佳解决方案。
我收到了服务器的响应，如下所示：

<style id="styles">.color_txt{color:green;}</style>

我试图在head标记中追加：

 let styleEl = new DOMParser().parseFromString(res.data.html, "text/xml");
 styleEl.type= "text/css";
 // Remove current style
 document.getElementById('styles').remove();
 document.getElementsByTagName('head')[0].appendChild(styleEl.documentElement);

我看到新样式已添加到head标签，但是
问题在于样式没有应用，而是从元素中删除。
我正在使用React。

//编辑

如果我通过Web控制台在新创建的样式标签中手动添加样式，则该样式也不适用。

最佳答案

这里有一个图书馆可以做到这一点：https://www.npmjs.com/package/react-style-tag

使用方法如下：

import React, { Component } from "react";
import { Style } from "react-style-tag";

class App extends Component {
  constructor(props) {
     super(props);
     this.state = { styleTag: false };
     fetchStyleTag().then(styleTag => {
        this.setState({ styleTag });
     });
  }
  render() {
    const { styleTag } = this.state;
    return styleTag && <Style>{ styleTag }</Style>;
  }
}