首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >获取响应<style>标记,并使用React将其附加到head HTML节

获取响应<style>标记,并使用React将其附加到head HTML节
EN

Stack Overflow用户
提问于 2019-02-03 08:06:42
回答 1查看 143关注 0票数 0

我知道这是一种糟糕的做法,但对于这种情况来说,这是最好的解决方案。我收到了来自服务器的响应,如下所示:

代码语言:javascript
运行
复制
<style id="styles">.color_txt{color:green;}</style>

我正尝试在head标记中添加:

代码语言:javascript
运行
复制
 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控制台在新创建的style标签中手动添加样式,它也不适用。

EN

回答 1

Stack Overflow用户

发布于 2019-02-03 08:14:17

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

下面是你如何使用它:

代码语言:javascript
运行
复制
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>;
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54498751

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档